react 之 父子组件传值（看后即懂）

内容导读

互联网集市收集整理的这篇技术教程文章主要介绍了react 之 父子组件传值（看后即懂），小编现在分享给大家，供广大互联网技能从业者学习和参考。文章包含893字，纯文字阅读大概需要2分钟。

内容图文

父组件

class Data_Reconciliation extends Component {
    constructor(props) {
        super(props)
        this.state = {
       		btnName: '点击',
            radioValue: 'youyong', // 单选框的值
        }
    }
    changeText = (value) => {
        this.setState({ radioValue: value })
    }
    render() {
        return (
            <div className="data-reconciliation">
                <p>{this.state.radioValue}</p>
                <ListItem btnName={this.state.btnName}  pfn={this.changeText}></ListItem>
            </div>
        )
    }
}

子组件

class ListItem extends Component {
    constructor(props) {
        super(props)
    }
    handerClick = () => {
        this.props.pfn('涛哥')
    }
    render() {
        return (
            <button onClick={this.handerClick}>{this.props.btnName}</button>
        )
    }
}

父传子：

父组件直接在子组件上面添加需要传递的属性，本例传的是btnName,然后子组件通过this.props.btnName就可以拿到值

子传父：

父组件先定义一个获取值的方法，然后子组件触发父组件的这个方法，通过传参进行传值，本例是父组件定义changeText 方法，然后把方法传给子组件，子组件再触发父组件的方法，传递数据过去

是不是很简单啊

内容总结

以上是互联网集市为您收集整理的react 之 父子组件传值（看后即懂）全部内容，希望文章能够帮你解决react 之 父子组件传值（看后即懂）所遇到的程序开发问题。 如果觉得互联网集市技术教程内容还不错，欢迎将互联网集市网站推荐给程序员好友。

内容备注

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 gblab@vip.qq.com 举报，一经查实，本站将立刻删除。

内容手机端

---