3

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

<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组件层次结构作为道具向下传递？例如，Todo可以设置currentTodoId = 1为上下文，这可用于子减速器，但有替代方案吗？也许是一种父组件将存储减少到单个待办事项的方法，然后子组件将能够看到......？

此时，您可能想问“为什么”？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 的模式，但我想错了！

4

2 回答 2

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道具。如果它需要更多的道具，你可以todo像{...todo}我在<TodoBody>. 从您的示例中也不清楚为什么像这样SomeAnimation的组件也需要知道 todo ID - 大概传递它的一些视觉属性就足够了。

类似地，内部组件 likeTodoBody可能会将它们的一些 props 向下传递，但同样，这不一定是 ID：

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

通常，从返回的深层树render()通常意味着您的组件结构不是最佳的。您不必this.props.children在每个组件中都使用 - 随意让组件控制自己的渲染，并且只将必要的内容传递给它们。有时传递 anid很方便，有时直接传递数据会使依赖关系更加明确。

于 2016-04-16T02:08:20.350 回答
0

Connect 似乎是一个坏主意，正如您所说，每个 Todo 都是一个演示组件，应该忽略有关 redux 存储或应用程序的任何内容。

我在一个项目中遇到了同样的问题，目前我认为这似乎很痛苦，但它使每个元素都可重用并简化了代码（不是代码的数量，而是逻辑）。也许你可以简化你的dom/组件结构，使用react children封装来限制“级别”的数量

不确定我帮了很多忙。如果您找到一个很好的解决方案，我将很高兴阅读它。

祝你好运

于 2016-04-06T14:51:33.403 回答