Question

我正在讨论重构我正在从jQuery开始反应的网站的部分内容。在开始之前，我很欣赏到目前为止我对思考过程的一些反馈。

<DeviceChooser>
<ManufacturerSelect />
<DeviceSelect />
<ButtonOne />
<ButtonTwo />
<DeviceChooser>

这是所需的组件。它的行为是：

父（DeviceChooser）通过componentWillMount上的ajax获取一些json数据。
它将部分数据传递给ManufacturerSelect，这是一个选择字段。
一旦选择了某些内容，DeviceChooser会将一些其他数据传递给DeviceSelect，这也是一个选择字段。
一旦选择了某些内容，如果满足某些条件，则Button1和Button2都将变为活动状态
点击Button1或Button2会将页面重定向到指定的网址，参数设置取决于2个选择字段。

更实际的是，您选择了手机制造商，然后在下一个选择中从该制造商中选择您的设备，然后根据您按下的按钮，您将被重定向到带有一些获取参数的page1或page2。

我的问题是：

应该决定按钮是否应该处于活动状态？ DeviceChooser或Buttons？
谁应该撰写重定向网址？选择器或按钮？
我将在整个网站上拥有此DeviceChooser组件的变体，我该怎么做才能确保至少一些可重用性？需要注意的是，有时它会有更多的选择字段只有2，而其他时候不同的选择字段将成为等式的一部分，具体取决于状态（例如，如果您的设备是笔记本电脑，您还可以指定设备具有的边缘形状））

我真的很感激任何反馈。我还创建了一个Gist，其中包含我目前提出的代码，如果有帮助的话。

Answer 1

自投资React以来我遵循的一种方法是使用containers。容器本质上是负责检索和操作数据然后将所有相关数据传递给所有孩子的组件，并且＃34; dumb＆＃34;只负责呈现所述数据的组件。

在这个前提下运作（或类似的东西）我建议在容器中对初始数据进行计算，并将所有内容传递下去。

因此，在这个实例中，我们应该在容器（或父组件）中执行以下操作

通过componentWillMount
操纵数据并将其传递给ManufacturerSelect

其他问题取决于您使用的框架。你能详细说明一下吗？您使用的是Redux，Flux，ReFlux等吗？

我已经快速查看了您的代码，我认为您应该做的一件非常有用的事情是为每个组件指定PropTypes。这对于调试非常有帮助，当您谈论在几个不同位置重用组件时，这将是至关重要的。另外（不了解完整的上下文）是否有必要在组件中的任何地方使用state？他们是否可以简单地将道具传递给他们？（再次，这取决于你的商店＆＃39; 重新使用）。

Answer 2

这是一个相对普遍的问题，但我的思路（非常自以为是）将如下：

您的按钮应该变得简单，通用按钮组件应该为此示例具有以下道具（除了一些样式道具）：

disabled
title
onClick

您的设备选择器是那些意识到组件混合在一起的人，这些按钮实际上应该在点击后继续执行某些操作，因此您只需要在该组件内处理这些知识。它将其余部分粘合在一起（传递数据），因此也应做出这些决定。

<DeviceChooser>
    <ManufacturerSelect data={this.state.manufacturers} />
    <DeviceSelect data={this.state.devices} />
    <Button 
        disabled={this.state.selectedManufacturer === null ? true : false} 
        title='Manufactuer details'
        onClick={this.handleManufacturerDetailsClick.bind(this, this.state.selectedManufactuer}}
    />
     <Button 
        disabled={this.state.selectedDevice === null ? true : false} 
        title='See device details'
        onClick={this.handleDeviceDetailClick.bind(this, this.state.selectedDevice }}
    />
<DeviceChooser>

设备选择器的方法可能类似于：

handleDeviceDetailClick(device) {
    history.pushState('/device/detail/' + device.id);
}

您希望将功能组件与无状态组件分开。对此有一个很好的解读是http://tylermcginnis.com/functional-components-vs-stateless-functional-components-vs-stateless-components/

我是否正在考虑对形式行为做出正确反应

2 个答案: