Question

我在React.js中创建预算应用，其中我的父组件具有总体余额，并且可以创建任意数量的特定＆＃34;预算＆＃34;组件（比如假期），可以从中创建任意数量的＆＃34; Entry＆＃34;组件（比方说，我将在旧金山花费x美元）。我最初的想法是，父母可以拥有一系列预算＆＃34;处于可以保持增长和变化的状态的组件，而预算组件可以有一个＆＃34; Entry＆＃34;处于其状态且可以继续增长的组件。但是，我意识到这是不好的做法，因为只有一个组件应该具有状态。

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

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

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 />传递到子组件中，并且这些处理程序会在setState()内调用<App />来更改预算数据，您的应用会对这些更改做出反应并从上到下重新渲染。

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

1 个答案: