Повышение статуса в ReactJS

Опубликовано: 7 Августа, 2021

Предварительные требования : ReactJs, состояние, свойства

Повышение состояния: как мы знаем, каждый компонент в React имеет собственное состояние. Из-за этого иногда данные могут быть избыточными и непоследовательными. Итак, подняв состояние, мы делаем состояние родительского компонента единым источником истины и передаем данные родительского компонента его дочерним элементам.

Пора использовать «Поднять состояние»: если данные в «родительских и дочерних компонентах» или «двоюродных компонентах» не синхронизированы.

Пример 1: Если у нас есть 2 компонента в нашем приложении. A -> B, где A является родительским элементом B. Сохранение одних и тех же данных в компонентах A и B может привести к несогласованности данных.

Пример 2: Если у нас есть 3 компонента в нашем приложении.

А
       / 
      до н.э

Где A является родителем B и C. В этом случае, если есть данные только в компоненте B, но компонент C также хочет эти данные. Мы знаем, что компонент C не может получить доступ к данным, потому что компонент может разговаривать только со своим родителем или дочерним элементом (а не с кузенами).

Проблема: давайте реализуем это на простом, но общем примере. Мы рассматриваем второй пример.

Полная структура файла:

Подход: чтобы решить эту проблему, мы поднимем состояние компонента B и компонента C на компонент A. Сделайте A.js нашим главным родительским элементом, изменив путь к приложению в файле index.js.

Перед:

 импортировать приложение из './App';

После:

 импортировать приложение из './A';

Имя файла - A.js:

Javascript

import React,{ Component }  from "react";
import B from "./B"
import C from "./C"
   
class A extends Component {
  
  constructor(props) {
    super(props);
    this.handleTextChange = this.handleTextChange.bind(this);
    this.state = {text: ""};
  }
  
  handleTextChange(newText) {
    this.setState({text: newText});
  }
   
  render() {
    return (
        <React.Fragment>
          <B text={this.state.text} 
             handleTextChange={this.handleTextChange}/>
          <C text={this.state.text} />
        </React.Fragment>
    );
  }
}
  
export default A;

Имя файла - B.js:

Javascript

 import React,{ Component } from 'react' ;
 
class B extends Component {
 
constructor(props) {
    super (props);
    this .handleTextChange = this .handleTextChange.bind( this );
 }
 
handleTextChange(e){
    this .props.handleTextChange(e.target.value);
 }
 
render() {
    return (
        <input value={ this .props.text}
               onChange={ this .handleTextChange} />
    );
 }
 }
     
export default B; 

Имя файла - C.js:

Javascript

 import React,{ Component } from 'react' ;
 
class C extends Component {
 
render() {
    return (
        <h3>Output: { this .props.text}</h3>
    );
 }
 }
     
export default C; 

Вывод: теперь компонент C может получить доступ к тексту в компоненте B через компонент A.

Technical Scripter React-js

Повышение статуса в ReactJS

Javascript

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ