React：如何渲染依赖于其他组件渲染的数据的组件答案

【问题标题】：React : How to render a component which depends on the data rendered by other componentsReact：如何渲染依赖于其他组件渲染的数据的组件
【发布时间】：2016-06-06 14:30:49
【问题描述】：

我有三个组件“FirstName”、“LastName”和“FullName”。 'FirstName' 和 'LastName' 组件是独立的，并进行单独的服务器调用以获取数据（使用 Flux 架构）。现在我有一个使用所有组件的页面，我想通过使用其他两个获取的数据来呈现“FullName”组件。

【问题讨论】：

标签： reactjs flux reactjs-flux

【解决方案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>
  );
}

如果您需要自己渲染其中一个子对象，您可以进入 name 对象的相应存储区，然后将其作为 prop 传递，让组件渲染正确的部分。

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 架构。所有有意义的更改都应该由操作触发，以便可以重放、调试和记录。

【讨论】：

【解决方案2】：

同意丹·普林斯的观点但是您仍然可能需要 3 个独立的组件，这些组件根据您的要求不直接相关。您可以使用以下图片（假设您了解助焊剂的工作原理）flux solution image

【讨论】：