【React】react学习笔记06-React多组件父子传值

the_fool_

已于 2022-01-27 16:39:46 修改

阅读量373

点赞数

分类专栏： React 文章标签： react.js javascript 前端

于 2019-09-30 11:00:25 首次发布

本文链接：https://blog.csdn.net/the_fool_/article/details/101758241

版权

React 专栏收录该内容

27 篇文章 0 订阅

订阅专栏

前文讲到，React是面向组件来开发的，那么组件之间是怎样配合的呢？

父组件传参子组件：

下面我定义了两个组件，上层组件为Component，子组件为SubComponent。父组件调用子组件的时候，通过props属性传递了两个参数，分别为：times以及clickEvent

<div>
　　<p>=========将父组件中的state值与函数传递给子组件========</p>
　　<SubComponent times={times} clickEvent={this.clickBtn.bind(this)}/>
　　<p>=================================================</p>
</div>

子组件中接收父组件传递的参数并使用：

//从props中取值
const times = this.props.times;

父组件函数的调用：

 //实际上调用的是传参进来的函数
this.props.clickEvent();

DEMO：

仍旧是复制代码看效果：

<!DOCTYPE html><html>
<head>
    <meta charset="utf-8" />
    <title>React Tutorial</title>

</head>
<body>
    <!--react基础库-->
      <!--react基础库-->
      <script src="https://cdn.bootcss.com/react/16.8.6/umd/react.development.js"></script>
    <script src="https://cdn.bootcss.com/react-dom/16.8.6/umd/react-dom.development.js"></script>
    <script src="https://cdn.bootcss.com/babel-standalone/6.26.0/babel.js"></script>

    <div id="content"></div>

    <script type="text/babel">
        //定义父组件
        class Component extends React.Component{
            //构造函数，在初始化组件的时候会执行
              constructor(props){
                  super(props);
                  this.state={
                      times: 1
                  }
              }
            //render会进行页面的渲染，当state中数据更新或者发送ajax等事件被监听到都会触发render的刷新
              render(){
                  //从state中取值
                  const times = this.state.times;
                  // 绑定onClick事件函数
                  return(
                      <div>
                          <p>=========将父组件中的state值与函数传递给子组件========</p>
                          <SubComponent times={times} clickEvent={this.clickBtn.bind(this)}/>
                          <p>=================================================</p>
                      </div>
                  );
              };
              clickBtn(){
                    //console.log("click")
                    let times=this.state.times;
                    times+=1;
                    this.setState({times});
             }
        }
        //定义子组件
        class SubComponent extends React.Component{
            //构造函数，仅在初始化组件的时候会执行一次
            constructor(props){
                super(props);
                this.state={times: this.props.times}
            }

            render(){
                //从props中取值
                const times = this.props.times;
                // 绑定onClick事件函数
                return(
                    <div>
                        <p>次数:{times}</p>
                        <button onClick={this.clickSubBtn.bind(this)} >Click</button>
                    </div>
                );
            }
            clickSubBtn(){
                //实际上调用的是传参进来的函数
                this.props.clickEvent();
            }
        }
        ReactDOM.render(<Component />,document.getElementById("content"));


    </script>


</body>
</html>

DEMO的结果是：统计点击次数。

注意事项：

1、React只支持从上往下的参数传递。

2、不要建立太过复杂的上下结构，一般建议2-3层。

the_fool_

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
【React】react学习笔记06-React多组件父子传值

前文讲到，React是面向组件来开发的，那么组件之间是怎样配合的呢？父组件传参子组件：下面我定义了两个组件，上层组件为Component，子组件为SubComponent。父组件调用子组件的时候，通过props属性传递了两个参数，分别为：times以及clickEvent<div>　　<p>=========将父组件中的state值与函数传递给子组件...
复制链接

扫一扫