Как получить доступ к данным в компоненте, реагирующем на ребенка, из основного компонента-ответчика

Question

Я новичок в ReactJS. Я хочу иметь возможность устанавливать некоторые свойства компонента React, а затем иметь доступ к нему из компонента React-компонента. Но я не совсем уверен, как это сделать. Например, рассмотрим следующие два класса:

export default class SubWindow extends React.Component { 

    click(event) 
    { 
     this.myCollection.push({name:'receiptNum',value:$(event.currentTarget).html()}); 
    } 

    render() 
    { 
     return (
     <ul> 
      <li onClick={this.click.bind(this)}>0</li> 
      <li onClick={this.click.bind(this)}>1</li> 
      <li onClick={this.click.bind(this)}>2</li> 
      <li onClick={this.click.bind(this)}>3</li> 
     </ul> 
     ); 

    } 

} 



export default class MainWindow extends React.Component { 

    click(event) 
    { 
     console.log(SubWindow.myCollection); 
    } 

    render() 
    { 
     const SubWindow = require('./SubWindow').default; 
     return (
      <SubWindow /> 
      <button onClick={this.click}>Log subwindow array</button> 
     ); 

    } 

} 

В принципе, я хочу SubWindow иметь свойство myCollection, которое просто массив объектов JSON. myCollection заполняется каждым щелчком по элементу списка.

Позже, я хочу иметь возможность console.log(SubWindow.myCollection), когда я нажимаю кнопку в родительском окне. Мой вопрос, как я могу получить доступ к SubWindow.myCollection от компонента-компонента-родителя?

Answer 1

Я бы порекомендовал вам решить эту проблему с помощью обратного вызова. MainWindow создает SubWindow, и здесь вы можете указать функцию обратного вызова как свойство. Например:

<SubWindow onClick={this.onSubwindowClick} /> 

Теперь в вашем SubWindow классе, просто вызовите эту функцию обратного вызова внутри click функции:

click(event) 
    { 
     this.myCollection.push({name:'receiptNum',value:$(event.currentTarget).html()}); 
     this.props.onClick(/* data you want to pass to the parent */); 
    } 

Также вы должны определить onSubwindowClick в классе MainWindow. Эта функция должна получать любые данные, которые вы хотите от дочернего класса - данные, которые вы передаете от ребенка, где я помещаю комментарий /* data you want to pass to the parent */.

Кроме того, не забудьте связать this с этим onSubwindowClick функции. Обычно это делается в constructor класса, который я предлагаю вам создать для каждого компонента.

Вы можете найти хороший пример о «передаче данных родителям» на страницах Реагента. Вы можете взглянуть на статью Thinking in React, в частности раздел «Шаг 5: Добавить обратный поток данных».

Answer 2

просто передайте функцию дочернему компоненту, а функция связывается с родительским компонентом 'this', на самом деле вы только что создали закрытие.