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和{{1}组件，以便他们可以单独获取他们的数据。

LastName

但请注意，让组件管理应用程序的子状态直接针对Flux架构。所有有意义的更改都应该由操作触发，以便可以重放，调试和记录。

Answer 2

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

React：如何呈现依赖于其他组件呈现的数据的组件

2 个答案: