Question

我有两个组成部分。例如仪表板和卡

控制台：

render() {
        const elements = this.props.cards.map((card, key) => {
            return (
                <Card item={card} onSave={this.onCardSave}>
            )
        })
    }

卡

render() {
    return (
        <div class="card">
            <input type="checkbox" checked={this.state.item.checked} onChange={this.onChangeChecked} />
            { this.someCondition() && <input type="text" value={this.state.item.name} onChange={this.onChangeName} />}
        </div>
    )
}

因此，文本字段可见性取决于某些条件。例如：

function someCondition () {
    return this.state.item.checked
}

!!此逻辑仅适用于Card实例

那么存储这种逻辑的最佳位置在哪里？

在卡内？（比如我的代码）

在信息中心内？（例如，传递道具中的所有事件）

如果你能提供一些关于这个主题的文章，我将非常感激

Answer 1

您可以阅读无状态与有状态组件（或智能与哑巴）。这个SO链接很清楚ReactJS difference between stateful and stateless

在您的示例中，仪表板将保持卡的状态，因为您猜测您需要知道卡是否已经过检查以便您可以执行其他操作（例如切换其他组件的显示）l。如果你在卡中有这个逻辑，那么你需要尝试在仪表板中引用它，这会变得烦人而且更加困难。

希望有所帮助

Answer 2

正常方法社区正在使用，是两种类型的单独组件：

presentional components ：关注外观的方式。
容器组件：关注工作的方式。

但需要注意的重要事项之一是：“虽然容器组件往往是有状态的，而表示组件往往是无状态的，但这不是一个硬规则。演示组件可以是有状态的，容器也可以是无状态的。”

与您的情况一样，您的逻辑示例仅取决于组件的内部逻辑，因此在我看来，最好保留在Card组件中。

有用的文章： Redux创作者Dan Abramov： https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0#.kyc0tpd11

在React app中存储逻辑的最佳位置？

2 个答案: