react 组件间互相传值

2022-01-24 19:59:35 阅读：166 来源： 互联网

标签：render 在子 value react state props 组件传值

在父组件中定义一个函数，该函数用于处理传递过来得值（比如用于修改父组件中state得数据）
在子组件调用部分通过属性绑定得形式绑定该函数（在子组件中就可以通过this.props.属性名就可以拿到该函数）
在子组件中绑定触发传值得事件比如点击事件，在事件处理函数中通过this.props.属性名（）调用父组件中定义得方法
就可以在父组件中拿到传递过来得值进行使用

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>自定义用来显示一个人员信息的组件</title>
</head>
<body>
<!-- 准备好一个“容器” -->
<div id="root"></div>
<!-- 引入react核心库 -->
<script src="https://cdn.staticfile.org/react/16.4.0/umd/react.development.js"></script>
<!-- 引入react-dom，用于支持react操作DOM -->
<script src="https://cdn.staticfile.org/react-dom/16.4.0/umd/react-dom.development.js"></script>
<!-- 引入babel，用于将jsx转为js -->
<script src="https://cdn.staticfile.org/babel-standalone/6.26.0/babel.min.js"></script>
<!-- 引入prop-types，用于对组件标签属性进行限制 -->
<script src="https://cdn.bootcdn.net/ajax/libs/prop-types/15.8.1/prop-types.js"></script>

<script type="text/babel"> /* 注意2：此处一定要写babel，表示里面写的不是js，而是jsx，是通过babel将jsx转为js的 */
// 创建类式组件
class Father extends React.Component {
    handleGetMsg = (value) => {
        console.log(value)
        this.setState({
            test: value
        })
    }
    state = {

    }
    render() {
        return (
            <div>
                <p>从子组件中接收到得数据: {this.state.test}</p>
                <Child getMsg={this.handleGetMsg}/>
            </div>
        )
    }
}

class Child extends React.Component {
    state = {
        val: '子组件state'
    }
    handleClick = () => {
        this.props.getMsg(this.state.val)
    }
    render() {
        return (
            <div>
                <button onClick={this.handleClick}>子组件</button>
            </div>
        )
    }
}
ReactDOM.render(<Father />, document.getElementById('root'))
</script>
</body>
</html>

标签：render,在子,value,react,state,props,组件,传值
来源： https://blog.csdn.net/fwk19840301/article/details/122673676

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

react 组件间互相传值