React组件的父子通信

一、父组件向子组件

• 父组件在调用子组件的时候，将属性传递给子组件

//这个是父组件
export default class Father extends Component {
    constructor(){
        super()
        this.state={
            list:['a','b','c']
        }
    }
    render() {
        return (
            <div>
                <Children list={this.state.list} />
            </div>
        )
    }
}

• 子组件通过props接受父组件传过来的属性

export default class Children extends Component {
    render() {
        let {list} = this.props
        return (
            <ul>
                {
                    list.map((item,index)=>{
                        return <li key={index}>{item}</li>
                    })
                }
            </ul>
        )
    }
}

二、子组件向父组件

• 父组件将一个改变自身状态的方法传递给子组件

//Txt为子组件，传递给子组件的方法为this.add()
export default class Father extends Component {
    constructor(){
        super()
        this.state={
            list:[]
        }
    }
    add = str => {
        console.log(str)//str为子组件传递过来的参数
        this.setState({
            list:[...this.state.list,str]
        })
    }
    render() {
        return (
            <div>
                <Txt add={this.add}></Txt>
                <List list={this.state.list} />
            </div>
        )
    }
}

• 子组件通过调用父组件传递过来的方法实现通信，当子组件调用该方法时，把数据放到参数里面传递给父组件，父组件的方法即会执行，完成通信

export default class Txt extends Component {
    input = (e) => {
        if(e.keyCode === 13){
            let {add} = this.props
            add(e.target.value)
        }
    }
    render() {
        return (
            <div>
                <input onKeyUp={this.input} type="text" />
            </div>
        )
    }
}