Как получить экземпляр компонента в React

Question

Я хочу знать, можно ли получить экземпляр компонента так, как мне нужно.

Я помещаю свой новый компонент как дочерний элемент в основное состояние, но в обоих файлах нет одного и того же объекта.

Мне нужно достичь состояния детей в моем главном компоненте.Поиск в google для экземпляра Componenet не помогает, возможно, я не в фокусе, и имя это другое.

Вот мой MainComponent:

import React, { Component } from 'react';
import AnotherComponent from './../whatever/AnotherComponent';

class MainComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
     children: [],
    };
  }

  addChild() {
   const { children } = this.state;
   this.setState({
    children: children.push(<AnotherComponent />)
   });
  }

  getChildrenState(component) {
    return component.state(); // this doesn't work!
  }

  render() {
    const { children } = this.state;
    return ( 
     <div>
       {(children.map(i => (<div key={this.getChildrenState(i).id}>{i}</div>))}
     </div>
    )
  }

И это другой компонент

import React, { Component } from 'react';

class AnotherComponent extends Component {
  constructor(props) {
    super(props);
    this.state = {
     id: 144,
    };
  }

  render() {
    return ( 
     <div>
       Here it is my cHild!
     </div>
    )
  }

Answer 1

Помещение <AnotherComponent/> в состояние не имеет смысла, поскольку это объект элемента React, который не связан с конкретным экземпляром компонента.

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

Экземпляр компонента класса должен быть получен с помощью ссылки, и для доступа к экземпляру state это последнее средство, которое может потребоваться для расширения сторонних компонентов, которые не обеспечивают желаемой функциональности.

Если AnotherComponent является компонентом первого лица, он должен быть соответствующим образом спроектирован, чтобы не требовать доступа к state извне:

  render() {
    return ( 
     <div key={this.state.id}>{this.state.id}</div>
    )
  }

Если выходной сигнал должен быть большегибкий, он может использовать шаблон поддержки рендера:

  render() {
    const render = React.Children.only(children);
    return ( 
     <div key={this.state.id}>{render(this.state.id)}</div>
    )
  }

и используется как:

<AnotherComponent>{id => <div>{id}</div>}</AnotherComponent>

Answer 2

Если вы хотите получить доступ к состоянию дочернего компонента (здесь AnotherComponent), то вы можете либо:

• Сохранить состояние внутри AnotherComponent и передать значение родительскому элементу (здесь MainComponent) в прослушивателе изменений (при каждом изменении состояния), или;
• Сохранение состояния в родительском (здесь MainComponent) и передача значения дочернему элементу в виде проп.

Дайте мне знать, если вы хотите, чтобы я привел пример реализации.