呈现多个相同的React组件，它可以呈现多个其他组件？

我在React.js中创建了一个预算应用程序，其中我的父组件具有总体平衡，并且可以创建任意数量的特定“预算”组件（例如休假），从中可以创建任意数量的“进入“组件（比如，我会在旧金山花费x美元）。我最初的想法是，父母可以在其状态中有一组“预算”组件，可以保持增长和变化，而预算组件可以在其状态中有一组“数据”组件，并且可以保持增长。但是，我意识到这是不好的做法，因为只有一个组件应该有状态。呈现多个相同的React组件，它可以呈现多个其他组件？

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

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

来源

2017-07-06 Gauri Ramesh

“只有一个组件应该有状态”根本不是真的。任何组件都具有状态是完全正常的。即使表示组件也可以拥有自己的状态。你提出的所有IMO都不是不好的做法。 –

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

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

它可能要结束了看起来像预算对象的数组，而内部的每个那些预算的对象有项的数组：

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

然后当谈到反应，你会希望把该状态在主要的<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 />进行修改，预算数据，那么你的应用程序将响应这些变化和重新渲染方面从上到下。

来源

2017-07-06 14:59:43 WildService

感谢您的回应，这很有道理。我该如何做到这一点，所以这些预算只会出现在点击某个按钮上？ –

您可以在''中添加一个标志，例如'showBudgets：false'，然后像'{showBudgets &&

...

}'一样有条件地呈现预算列表。然后添加一个带'onClick'的按钮，它执行'setState（{showBudgets：true}）''。 – WildService

呈现多个相同的React组件，它可以呈现多个其他组件？

回答

相关问题