Question

ReactJS两个组件在角度上进行通信，我们只是在使用最佳服务方式，但是这里我是React 16的新手。

Answer 1

react中的两个组件可以通过以下方式进行通信

通过道具

父级->子组件

孩子->父母通过回调

孩子->孩子（通过使用其壁橱父组件）

例如：

import React, {Component} from 'react';
class Parent extends Component {
    constructor() {
      super()
      this.state = {
       name: "John Doe"
      }
      this.changeName = this.changeName.bind(this)
    }
   changeName(newName) {
     this.setState({
       name: newName
     })
   }

    render() {
       return (
           <div>
               // passing data from parent component to child component using props
               // name={this.state.name} changeName={this.changeName}
               <Child name={this.state.name} changeName={this.changeName} />
               <SecondChild name={this.state.name} />
           </div>
         )

      }
 }

 function Child(props) {
   return (
      <div>
         <h1>My name in Child Component is: {props.name} </h1>
         // passing data from child component to parent component using Callback
         // onClick={() => props.changeName('Jeremy Smith')}
         <button onClick={() => props.changeName('Jeremy Smith')}>Change Name</button>
         // when button is clicked "Jeremy Smith" is passed to parent component and 
         // from their passed to both Child and SecondChild components
         // this way we communicate between two child components
      </div>
    )
 }

 function SecondChild(props) {
   return <h1>My Name in Second Child Component is: {props.name}</h1> 
 }

另外

您还可以使用React Context API将数据向下传递给子组件。

或者使用状态管理库（例如redux）来创建单个共享存储，并将所需的数据传递给组件。

React16两个组件进行通信

1 个答案: