React16 Два компонента общения - PullRequest
Новая
       14

React16 Два компонента общения

0 голосов
/ 08 января 2019

ReactJS Два компонента связи, в угловом выражении, мы просто наилучшим образом используем сервис, но здесь я новичок в реакции 16.

1 Ответ

0 голосов
/ 08 января 2019

Два компонента в реакции могут взаимодействовать следующим образом

Родитель -> Дочерний компонент через реквизиты

Ребенок -> Родитель с помощью обратного вызова

Child -> Child с помощью родительского компонента шкафа

Например: 

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, для создания единого общего хранилища и передачи необходимых данных компонентам.

...