React组件之间的通讯

作者: 魔仙堡下的老仙女 | 来源:发表于2017-11-08 15:26 被阅读0次

React组件之间的通讯
react组件之间的通讯
【react】父子组件之间通讯props
react组件通信
react组件之间的通信
react父子通讯
vue页面和component组件之间双向通讯(续1)
react组件间通信
react子组件向父组件传值
react 问题更新。。。。

在 React 中，UI 以组件的形式来搭建，组件之间可以嵌套组合。另，React 中组件间通信的数据流是单向的，顶层组件可以通过 props 属性向下层组件传递数据，而下层组件不能向上层组件传递数据，兄弟组件之间同样不能。这样简单的单向数据流支撑起了 React 中的数据可控性。

然而在我们的开发中会有一些特殊的需求，需要子组件控制父组件的状态，或者无关系组件之间的通信。那么，更全面的组件间通信形式该怎么实现呢？

子父组件
需要父组件给子组件一个方法去修改自己的数据，子组件里边调用父组件的方法修改数据

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 核心 -->
  <script src="../build/react.min.js"></script>
  <!-- 渲染dom -->
  <script src="../build/react-dom.min.js"></script>
  <!-- 把jsx、es6转换成js、es5 -->
  <script src="../build/browser.min.js"></script>
</head>
<body>
  <div id="root"></div>
</body>
<script type="text/babel">
  var Button = React.createClass({
    changeNumber:function () {
      this.props.add()
    },
    render:function () {
      return (
        <div>
          <p onClick={this.changeNumber}>子组件按钮++</p>
        </div>
      )
    }
  })
  var Box = React.createClass({
    getInitialState:function () {
      return{
        number:1
      }
    },
    addNumber:function () {
      this.setState({
        number:this.state.number+1
      })
    },
    render:function () {
      return (
        <div>
          <p>数量:{this.state.number}</p>
          <button onClick={this.addNumber}>按钮++</button>
          <Button add={this.addNumber}/>
        </div>
      )
    }
  })
  ReactDOM.render(<Box/>,document.getElementById("root"))
</script>
</html>

兄弟组件

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <!-- 核心 -->
  <script src="../build/react.min.js"></script>
  <!-- 渲染dom -->
  <script src="../build/react-dom.min.js"></script>
  <!-- 把jsx、es6转换成js、es5 -->
  <script src="../build/browser.min.js"></script>
</head>
<body>
<div id="root"></div>
</body>
<script type="text/babel">
  var Text = React.createClass({
    render:function () {
      return (
        <p>{this.props.children}</p>
      )
    }
  });
  var Btn = React.createClass({
    ChangeNumber:function () {
      this.props.add()
    },
    render:function () {
      return(
        <p onClick={this.ChangeNumber}>{this.props.children}</p>
      )
    }
  });
  var Box = React.createClass({
    getInitialState:function () {
      return{
        number:1
      }
    },
    addNumber:function () {
      this.setState({
          number:this.state.number+1
        }
      )
    },
    render:function () {
      return (
        <div>
          <Text>数量：{this.state.number}</Text>
          <Btn add={this.addNumber}>按钮</Btn>
        </div>
      )
    }
  });
  ReactDOM.render(<Box/>,document.getElementById("root"))
</script>
</html>