react 组件间的通信

组件通信

• 在 React.js 中，数据是从上自下流动（传递）的，也就是一个父组件可以把它的 state / props 通过 props 传递给它的子组件，但是子组件不能修改 props
• React.js 是单向数据流，如果子组件需要修改父组件状态（数据），是通过回调函数方式来完成的。

通信方案

• 父传子：
  父组件调用子组件时把数据添加子组件的属性中，然后子组件中从props属性中，获取父级传递过来的数据。
• 子传父：
  在父级中定义相关的数据操作方法(或其他回调), 把该方法传递给子级，在子级中调用该方法父级传递消息 。
• 兄传弟：
  将数据托管在父级上，然后分别传给子级。

父组件：App.js

import React, { Component } from "react";
import Child from "./Child";
export default class App extends Component {
  state = {
    num: 1,
  };
	
	// 回调方法
  setNum = (newNum) => {
    this.setState({
      num: newNum,
    });
  };

  render() {
    let { num } = this.state;
    console.log(num);
    return (
      <div>
        {/* 父传子 */}
        <Child num={num} setNum={this.setNum} />
      </div>
    );
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

子组件：Child.js

import React, { Component } from 'react'

export default class child extends Component {
  render() {
    console.log(this.props); // 接收父组件传递的值
    let { num, setNum } = this.props
    return (
      <div>
        <h3>child : { num }</h3>
        <button  onClick={()=>{
          setNum(18);
      }}>子传父</button>
      </div>
    )
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16