渲染同一个 React 组件的多个，哪个可以渲染另一个组件的多个？

Question

我正在 React.js 中创建一个预算应用程序，其中我的父组件有一个整体余额，并且可以创建任意数量的特定“预算”组件（例如，假期），从中可以创建任意数量的“入门”组件（例如，我将在旧金山花费 x 美元）。我最初的想法是，父组件可以在其状态下拥有一组“预算”组件，这些组件可以保持增长和变化，而预算组件可以在其状态下拥有一组“条目”组件，并且也可以保持增长。但是，我意识到这是不好的做法，因为只有一个组件应该有状态。

鉴于任何人都应该能够返回并更改任何先前创建的预算中的条目数，因此管理我的预算及其在父组件中的条目的最佳方式是什么？

感谢您的帮助，如果造成混淆，我深表歉意！

Answer 1

是的，我认为“只有一个组件应该有状态”的想法是正确的。您的问题的评论者是正确的，状态可以放在 React 的组件树中的任何位置 - 这通常是您对与 UI 相关的状态所做的事情（例如，是否选择了此按钮）。但是当涉及到应用程序状态时，即您的应用程序正在呈现的数据，通常将它们放在一个地方很方便。

一开始只考虑纯数据结构，不用担心 React。

它可能最终看起来像一个预算对象数组，并且在每个预算对象中都有一个条目数组：

[
  {
    title: 'Vacations',
    entries: [
      {
        spent: 10,
        place: 'San Francisco',
        ...
      },
      ...
    ],
  },
  ...
]

然后，当涉及到 React 时，您会希望将该状态放在主要的 <App /> 组件中。 <App /> 的职责是渲染<Budget /> 组件的列表。这些预算组件中的每一个都会将其数据和条目作为道具传递给它。比如，

class App extends Component {
  constructor () {
    this.state = {
      budgets: [... as above ...]
    }
  }

  render () {
    const { budgets } = this.state
    return (
      <div>
        {this.state.budgets.map(budget => {
          <Budget key={budget.title} {...budget} />
        })}
      </div>
    )
  }
}

在<Budget /> 中，您可以以类似的方式渲染<Entry /> 组件数组，因为每个<Budget /> 都会收到一个entries 数组作为道具。

在更改数据方面，只要您将处理程序从 <App /> 传递到子组件，并且这些处理程序在 <App /> 内调用 setState() 以更改预算数据，那么您的应用就会对这些数据做出反应从上到下更改并重新渲染。