javascript - 渲染同一个 React 组件的多个，它可以渲染另一个组件的多个？

Question

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

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

感谢您的帮助，如果这令人困惑，我很抱歉!

Answer 1

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

首先考虑纯数据结构，不用担心React。

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

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

然后，当涉及到 React 时，您需要将该状态放在主 <App /> 中成分。 <App />的责任将渲染 <Budget /> 的列表成分。这些预算组件中的每一个都会将其数据和条目作为 Prop 传递到其中。所以类似，

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数组作为 Prop 。

在改变数据方面，只要从<App />传下handler就可以了进入子组件，这些处理程序调用 setState()里面<App />要更改预算数据，您的应用将对这些更改使用react并从上到下重新渲染。