Просим передать ссылку на другой компонент в ReactJS

Question

Перед тем, как кто-либо нажал кнопку закрытия, я уже рассмотрел следующий вопрос: ReactJS Two components communicating. Моя проблема - это именно тот третий сценарий, который был разработан в текущем принятом ответе.

Я использую ReactJS для сборки чего-то с двумя компонентами. По соображениям HTML (и презентации) я хочу, чтобы мои два компонента находились в двух разных местах страницы.

На данный момент, я следующий шаблон, соответствующий сценарий № 2:

FooForm = React.createClass({ 
    ... 
}); 

FooList = React.createClass({ 
    ... 
}); 

FooManager = React.createClass({ 
    ... 

    render: function() { 
     return (
      <div> 
       <FooForm ref="form" manager={this} /> 
       <FooList ref="list" /> 
      </div> 
     ); 
    } 
}); 

React.render(
    <FooManager someProp={value} />, 
    document.getElementById('foo') 
); 

Это дает что-то вроде:

<div id="foo"> 
    <form>Form generated with the render of FooForm</form> 
    <ul>List generated with the render of FooList</ul> 
</div> 

Однако, я хотел бы иметь что-то вроде этого:

<div id="fooform"> 
    <form>Form generated with the render of FooForm</form> 
</div> 
<!-- Some HTML + other controls. Whatever I want in fact --> 
<div>...</div> 
<div id="foolist"> 
    <ul>List generated with the render of FooList</ul> 
</div> 

проблема состоит в следующем: , как я могу сохранить ссылку в каждый компонент? Или, по крайней мере, ссылку Form -> List?

Я пытался создать FooList до и передать ссылку на текущий менеджер, но я получаю следующее предупреждение/ошибка:

Error: Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. This usually means that you're trying to add a ref to a component that doesn't have an owner (that is, was not created inside of another component's `render` method). Try rendering this component inside of a new top-level component which will hold the ref. 

Документация говорит, что вы можете прикрепить события для соединения двух компонентов, которые делают не имеют отношения родитель-ребенок. Но я не понимаю, как это сделать. Может ли кто-нибудь дать мне несколько указателей?

Answer 1

Less Simple Communication урок react-training имеет хороший пример того, как можно перемещать действия & состояние в сторону, чтобы избежать того, чтобы создать прямую связь между связанными компонентами.

Вам не нужно вникать в полную реализацию Flux, чтобы получить выгоду от этого подхода, но это хороший пример, чтобы привести вас к Flux, если вам это понадобится или что-то в этом роде.

Обратите внимание, что для этого требуется, чтобы вы определяли связь между компонентами на основе изменения состояния, а не явно передавали ссылку на экземпляр компонента (как вы это делали выше) или обратный вызов, связанный с компонентом, управляющим состоянием.

Answer 2

Это идеальный вариант использования для архитектуры типа Flux.

Вы хотите, чтобы кто-то FooManager смог вызвать изменения состояния в обоих компонентах. Или, фактически, при запуске различных компонентов через Actions состояние изменяется друг в друге.

Flux Todo-App Tutorial отлично иллюстрирует ваш прецедент!

После этого у вас будет выбор использования Facebook-приложений Flux или других gazillion. Мой личный фаворит Reflux