给定这样的组件层次结构:
<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 的模式,但我想错了!