The parent component

import React, { Component } from 'react'; import { connect } from 'react-redux' import Child from '.. /Child/index.js' class HelloWord extends Component { // constructor(props) { // super(props); // //console.log(this) // } //this.Hidelick=this.Hidelick.bind(this) componentWillMount() { Console. log(' called before rendering, both on the client side and on the server side. ')}; ComponentDidMount () {console.log(' called after the first rendering, only on the client side. The component then generates the corresponding DOM structure, which can be accessed through this.getDomNode (). ')} componentWillReceiveProps (newProps) {the console. The log (' component receives a new prop (updated) is invoked. This method is not called when render is initialized. ')} shouldComponentUpdate(newProps, newState) {console.log(' Returns a Boolean. Called when the component receives new props or state ') return true; } componentWillUpdate(nextProps, nextState) {console.log(' called when the component receives new props or state but has not yet rendered. Will not be called during initialization. '); } componentDidUpdate(prevProps, prevState) {console.log(' called immediately after component finishes updating. Not called at initialization ')} componentWillUnmount() {console.log(' called immediately when component is removed from DOM ')} HideClick=()=>{console.log(' SDFJKSDHF ')}  render() { console.log(this.props) return ( <div id="HelloWord"> <h1 onClick={this.HideClick}> HelloWord </h1> <Child HideClick={this.HideClick.bind(this)}></Child> </div> ) } } export default connect()(HelloWord)Copy the code

Child components

import React, { Component } from 'react';
// import PropTypes from "prop-types"


class Child extends Component {
    constructor(props) {
        super(props)
        this.state = {
            todos: [{ text: "one" }, { text: "two" }, { text: "three" }],
            name: "4444"
        }
    }

    render() {
        return (
            <div id='Child'>
                <h1 onClick={this.props.HideClick}>{this.state.name}</h1>
                <ul>
                    {
                        this.state.todos.map(function (item, index) {
                            if(item.text==="one"){
                                return <li key={index}>{item.text}</li>;
                            }else{
                                return <li key={index}>{item.text}</li>;
                            }
                            
                        })
                    }
                </ul>
            </div>
        )
    }

}

export default Child
Copy the code