Question

当您创建React组件时，您是否遵循仅具有连接到Container的dump / presentational react组件的理念？只有拥有转储组件才能实现redux（单一事实来源）的主要原则之一，但在组件隔离方面却很复杂。我的意思是：

...我最终有一个表组件可以显示数据并且能够选择行，但选择不起作用，除非它通过容器连接到商店。这在理论中是很好的，因为许多其他组件都依赖于该选择，因此让所有内容通过商店保持所有内容同步。但是，这意味着表组件本身无法完全交互（如果未连接到商店，则选择将无法工作）。这可能会使自动UI测试稍微难以测试，因为每个组件都需要有一个相关的容器才能正常工作。

另一个例子;假设您有一个对话框，您是否在组件本身中具有显示状态，或者是否通过容器将其连接到商店？

有什么想法吗？

Answer 1

我个人喜欢演示和容器组件方法。它使代码更清晰，更清晰，更可重用。

背后的想法是你的演示组件绝不能对数据执行任何操作，它纯粹是UI。这些数据必须来自您的容器（来自Redux商店，或来自帮助程序类等）。

最佳做法是通过道具从您的容器组件传递您的演示组件功能。

// Container Component

handleChange(e) {
  this.setState({ username : e })
}

render() {
  return (
    <Boarding
      placeholder={this.state.placeholder}
      error={this.state.error} 
      onChangeText={this.handleChange}
      name={this.props.FB_user.user_firstname}
      ProfilPicture={this.props.FB_user.user_picture} />
  )
}

export default connect((state) => ({
  FB_user: state.statusLogin,
}), {})(BoardingContainer)

这是一个简单的例子，说明如何将一个函数传递给你的演示组件（这里是TextInput）并连接到它以获取TextInput中输入的数据。

另外，如果你仔细观察，你会看到我通过this.props.FB_user.user_firstname＆amp;＆amp; this.props.FB_user.user_picture来自Redux Store，我使用代码示例的最后几行连接到它。

这是一篇非常着名的中篇文章，以获取更多详细信息：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.smfbi5hjj

希望这有帮助，如果您还有其他问题，请问我。

纯粹遵循Redux方式并且有Dump |演示组件

1 个答案: