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

Question

У меня есть три компонента «FirstName», «LastName» и «FullName». Компоненты «FirstName» и «LastName» независимы и делают отдельные вызовы сервера для извлечения данных (с использованием Flux Architecture). Теперь у меня есть страница, которая использует все компоненты, и я хочу отобразить компонент «FullName», используя данные, полученные двумя другими.

Answer 1

Если вы используете архитектуру Flux, то ваши компоненты не должны нести ответственность за выборку самих данных. Это должно произойти в соответствующем магазине. Тем не менее, компоненты могут отправить действие, которое запускает выборку данных в магазине.

Это делает намного больше смысла, чтобы вывести ребенка отношения с Fullname компонента к FirstName и LastName компонентов, а не пытаться идти в другую сторону, пытаясь вывести родителей из своих логических детей.

function FirstName(props) { 
    return <span>{props.firstName}</span>; 
} 

function LastName(props) { 
    return <span>{props.lastName}</span>; 
} 

function FullName(props) { 
    return (
    <span> 
     <FirstName name={props.name} /> 
     <LastName name={props.name} /> 
    </span> 
); 
} 

Если вам нужно сделать один из детей сами по себе, вы можете достичь в соответствующее хранилище для объекта имя, а затем передать его в качестве опоры и пусть компонент делают правильную часть.

let name = UserStore.getName(id); 

// to render full name 
return <FullName name={name} /> 

// to render first name 
return <FirstName name={name} /> 

// to render last name 
return <LastName name={name} /> 

Если у вас есть очень веские причины для извлечения данных в пределах ваших компонентов, то вы делаете FullName компонент обертки, который проходит id вниз к FirstName и LastName компонентам таким образом, что они могут принести свои данные в индивидуальном порядке.

function FullName(props) { 
    return (
    <span> 
     <FirstName id={props.id} /> 
     <LastName id={props.id} /> 
    </span> 
); 
} 

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

Answer 2

Согласен с Dan Prince Но все равно могут потребоваться 3 отдельных компонента, которые напрямую не связаны в соответствии с вашими требованиями. Вы можете пойти со следующим изображением (при условии, что вы знаете, как работает флюс) flux solution image