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传递给组件层次结构为道具？例如，Todo可以将currentTodoId = 1设置为可用的上下文对于儿童减少者，但有替代品吗？也许是父组件将存储减少到的一种方式那个子组件可以看到的单个待办事项......？

此时，你可能想问“为什么”？好吧，考虑到TodoList（在todos数组上运行）和嵌套TodoStatus（只想在一个todo上运行）之间可能有几个级别的严格表示组件。必须通过这样的层次结构传递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道具。如果它需要更多道具，您可以像todo那样使用{...todo}传播<TodoBody>个属性。从你的例子中可以明显看出为什么像SomeAnimation这样的组件需要知道todo ID - 大概传递它的一些视觉属性就足够了。

同样，像TodoBody这样的内部组件可能会将其部分道具传递下来，但同样，这不一定是ID：

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

通常，从render()返回的深树通常意味着您的组件结构不是最理想的。您不必在每个组件中使用this.props.children - 随意保持组件对其自己的渲染的控制，并且只传递它们所必需的内容。有时传递id很方便，有时直接传递数据会使依赖更明确。

Answer 2

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

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

不确定我帮了很多忙。如果你找到一个很好的解决方案，我很乐意阅读它。

祝你好运

管理嵌套的Redux容器而不传递道具？

2 个答案: