React 组件传值

  React作为前端工程化的三大框架之一，有其独有的特点和优势，组件之前的通讯是必不可少的内容，废话不多说，接下来就对这个做个总结（有不足之处欢迎留言评论）。

父组件传递数据给子组件

• 父组件提供要传递的数据
• 给子组件标签添加属性，值为 state 中的数据
• 子组件中通过 props 接收父组件中要传递的数据

class Parent extends React.Component {
  state = {
    lastName: '王'
  }

  render() {
    return (
      <div className="parent">
        父组件：
        <Child name={this.state.lastName} />
      </div>
    )
  }
}

const Child = (props) => {
  return (
    <div className="child">
      <p>子组件，接收到父组件的数据：{props.name}</p>
    </div>
  )
}

子组件给父组件传递的数据

• 父组件提供一个回调函数 (用于接收数据)
• 将该函数作为属性的值，传递给子组件
• 子组件通过 props 调用回调函数
• 将子组件的数据作为参数传递给回调函数

<!-- 父组件 -->
class Parent extends React.Component {
  state = {
    parentMsg: ''
  }

  getChildMsg = data => {
    console.log('接收到的子组件数据：'+data)
    this.setState({
      parentMsg:data
    })
  }

  render() {
    return (
      <div className="parent">
        父组件：{this.state.parentMsg}
        <Child getMsg={this.getChildMsg} />
      </div>
    )
  }
}

<!-- 子组件 -->
class Child extends React.Component {
  state = {
    msg:"刷抖音"
  }
  handleClick = () => {
    this.props.getMsg(this.state.msg)
  }
  render(){
    return (
      <div className="child">
        子组件：<button onClick={this.handleClick}>点我，给父组件传递数据</button>
      </div>
    )
  }
}

兄弟组件传值

• 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态

• 思想是：状态提升

• 公共父组件职责：提供共享状态，提供操作共享状态的方法

class Parent extends React.Component {
  state = {
    count: 0
  }

  onIncrement = () => {
    this.setState({
      count:this.state.count + 1
    })
  }

  render() {
    return (
      <div className="parent">
        <Child1 count={this.state.count}></Child1>
        <Child2 onIncrement={this.onIncrement}></Child2>
      </div>
    )
  }
}

class Child1 extends React.Component {
  render(){
    return <h1>计数器：{this.props.count}</h1>
  }
}

class Child2 extends React.Component {
  render() {
    return <button onClick={this.props.onIncrement}>+1</button>
  }
}

Context

• 作用：跨组件传递数据(解决了多级组件嵌套过深之间的传值)
  1. 调用 React.createContext() 创建 Provider (提供数据) 和 Consumer (消费数据) 两个组件
  2. 使用 Provider 组件作为父节点
  3. 设置 value 属性，表示要传递的数据
  4. 调用 Consumer 组件接收数据

const { Provider, Consumer } = React.createContext()

class App extends React.Component {
  render() {
    return (
      <Provider value="pink">
        <div className="app">
          <Node></Node>
        </div>
      </Provider>
    )
  }
}

const Node = props => {
  return (
    <div className="node">
      <SubNode></SubNode>
    </div>
  )
}

const SubNode = props => {
  return (
    <div className="subnode">
      <Child></Child>
    </div>
  )
}

const Child = props => {
  return <div className="child">
    <Consumer>
      {
        data => <span>我是子节点 -- {data}</span>
      }
    </Consumer>
  </div>
}

• 总结：
  1. 如果两个组件是多级嵌套关系，可以使用 Context 实现组件通讯
  2. Context 提供两个组件：Provider (提供数据) 和 Consumer (消费数据)