React子组件向父组件传参

react中子组件向父组件传参,可以先在父组件申明一个带有形参的函数方法,父组件自己不调用,然后通过子组件调用父组件的方法时传递实参的方式将参数传递给父组件,代码示例如下:


class Parent extends React.Component {
    state={
        parentMsg:''
    }
    showMsg=(data)=>{
        this.setState({
            parentMsg:data
        })
    }
    render() {
        return (
            <div>
                <div>我是父组件,子组件让我:{this.state.parentMsg}</div>
                <Child msg={this.showMsg} />
            </div>
        )
    }
}

// 子组件
class Child extends React.Component {
    render() {
        return (
            <div>
                <button onClick={()=>{ this.props.msg('跳舞')}}>点我让父组件跳舞</button>
            </div>
        )
    }
}

点击按钮前页面如下:
在这里插入图片描述
点击按钮,展示子组件传递给父组件的参数:
在这里插入图片描述


版权声明:本文为weixin_50157463原创文章,遵循CC 4.0 BY-SA版权协议,转载请附上原文出处链接和本声明。