React.js将handleClick方法从App传递到List到ListItem？

Question

有关React.js应用程序中良好形式的快速问题：

我有一个顶级应用程序，其状态类似于“ selectedItem”，并希望ListItem组件能够更改该状态。

因此，您在App上创建了一个顶级方法，如selectItem: function(item) ，该方法执行setState(selectedItem: item) 。

App将此功能作为属性向下传递给List组件。

列表组件将此函数作为属性向下传递给ListItem组件。

最后，ListItem组件将其用作onClick处理程序，并带有.bind(null, item)以便可以通过列表中单击的项目来更改顶级状态。

这是正确的吗？

看起来很乱。 似乎ListItem能够直接调用App.selectItem（item）更好，而不必将其向下传递3次。

Answer 1

如果ListItem直接知道App及其selectItem方法，则ListItem将与该应用程序耦合-永远不能在任何其他上下文中重用它。 为了使组件可重用，它们通常应将更改（或其他）处理程序作为适当时将调用的属性。

对于特定于应用程序（也就是，他们并不意味着是可重复使用的）组件，所有路过身边会导致混乱。 有一种称为flux的体系结构，它允许应用程序特定的视图（称为“控制器视图”）以您提到的大部分方式与应用程序范围的调度程序进行交互。

简而言之，应将可重复使用的组件传递给道具，以使其具有最大的可移植性。 特定于应用程序的组件可以直接访问应用程序级逻辑，尽管许多人仍然建议传递属性，因为它可以使数据流清晰明了。