[JavaScript知识库]React----组件通信（props）

父组件向子组件传数据

父组件

export default class App extends Component{
    state={id:'001',name:'测试',done:true}
    
    render() {
        const {name}=this.state
        return (
            <div className="App">
                <Search name={name}></Search>
                <List></List>
            </div>
        );
    }
}

子组件

export default class Search extends Component {
    
    render() {
        console.log(this.props)
        const {name}=this.props
        return (
            <div>{name}</div>
        );
    }
}

子组件向父组件传数据

子组件

export default class Search extends Component {
    updateData=()=>{
        this.props.changeData(id+1)
    }
    render() {
        console.log(this.props)
        return (
            <div>
                <button onClick={this.updateData}>修改父组件数据</button>
            </div>
        );
    }
}

父组件

export default class App extends Component{
    
    changeData=(e)=>{
        console.log(e)
    }
    render() {
        return (
            <div className="App">
                <Search changeData={this.changeData}></Search>
                <List></List>
            </div>
        );
    }
}