Reactjs 在React应用程序中存储逻辑的最佳位置？

我有两个部分。e、 g.仪表板和卡

仪表板：

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

！！此逻辑仅适用于卡实例

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

内卡？（就像我的代码）

仪表板内部？（例如，在道具中传递所有事件）

---

如果您能为我提供一些关于这个主题的文章，我将非常感谢您能阅读无状态组件与有状态组件（或智能组件与哑组件）的相关内容。这一联系非常清楚

在您的示例中，仪表板将保留卡的状态，因为我猜测您需要知道是否已选中某个卡，以便您可以执行其他操作（例如切换其他组件的显示）。如果你有这个逻辑卡，那么你需要尝试和参考，在仪表板，这变得烦人和更困难

---

希望有助于社区使用的正常方法是两种类型的独立组件：

表象成分：关注事物的外观

容器组件：关注事物的工作方式

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

就像在您的例子中一样，您的逻辑示例仅依赖于组件的内部逻辑，因此在我看来，最好将其保留在卡组件内部

有用的文章： 丹·阿布拉莫夫，Redux的创造者：

应该是一个很好的起点

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
}