javascript - 在不传递 Prop 的情况下管理嵌套的 Redux 容器？

Question

给定这样的组件层次结构:

<TodoList>
  <Todo>
    <TodoHeader/>
    <TodoBody>
      <TodoDetails>
        <TodoStatus />
      <TodoDetails>
      <TodoDescription />
    <TodoBody>
  <Todo>
</TodoList>

...还有像这样的商店:

{
  todos: [
    { id: 1, status: "INCOMPLETE", header: "title one", description: "do a something" },
    { id: 2, status: "INCOMPLETE", header: "title two", description: "something else" },
    { id: 3, status: "COMPLETE", header: "title three", description: "one more thing" },
  ]
}

嵌套的 TodoStatus 组件有没有一种不用传递 id 就可以连接到 store 的好方法组件层次结构作为 Prop ？例如，Todo 可以将 currentTodoId = 1 设置为上下文，这将可用对于 child reducers，但是还有其他选择吗？也许是父组件将商店减少到的一种方式子组件将能够看到的单个待办事项...？

此时，您可能想问“为什么”？好吧，请考虑在 TodoList(对待办事项数组进行操作)和嵌套的 TodoStatus(只想对单个待办事项进行操作)。必须像这样通过层次结构向下传递 todoId 非常痛苦:

<TodoList>
  <Todo todoId={1}>
    <SomeAnimation todoId={1}>
      <SomeLayout todoId={1}>
        <SomeOtherAnimation todoId={1}>
          <SomeDebugContainer todoId={1}>
            <TodoHeader todoId={1}>
            <TodoBody todoId={1}>
              <TodoDetails todoId={1}>
                <TodoStatus todoId={1}> // yay!

在这一点上，我想这正是 React 上下文所擅长的，所以可能没有特定于 Redux 的模式，但我想错了!

Answer 1

为什么他们都需要接受id作为论据？

通常层次结构中较高的一些组件(例如 Todo )会接受 id或 todo ，但下面的组件在接受什么方面会更具体，例如

function Todo({ todo }) {
  return (
     <SomeAnimation>
        <SomeLayout>
          <SomeOtherAnimation>
            <SomeDebugContainer>
              <TodoHeader title={todo.title} />
              <TodoBody {...todo} />
            </SomeDebugContainer>
          </SomeOtherAnimation>
        </SomeLayout>
     </SomeAnimation>
  )
}

在这个例子中，TodoHeader刚收到 title直接 Prop 。如果需要更多 Prop ，可以传过来todo属性 {...todo}就像我在 <TodoBody> 中所做的那样.从您的示例中看不出为什么像 SomeAnimation 这样的组件也需要知道待办事项 ID——大概传递它的一些视觉属性就足够了。

类似地，内部组件如 TodoBody可能会传递他们的一些 Prop ，但同样，这不一定是 ID:

function TodoBody({ title, text, status }) {
  return (
    <div>
      <TodoDetails text={text} />
      <TodoStatus status={status} />
    </div>
  )
}

一般来说，深树从render()返回通常意味着您的组件结构不是最理想的。您不必使用 this.props.children在每个组件中——随意让组件控制它们自己的渲染，并且只传递它们需要的东西。有时传递 id很方便，其他时候直接传递数据会使依赖关系更加明确。