reactjs - React16 两个组件通信

Question

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

Answer 1

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

父 ->通过道具的子组件

Child -> Parent通过回调

Child -> Child通过使用他们的 closet 父组件

例如：

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 这样的状态管理库来创建单个共享存储并将所需的数据传递给组件。