javascript - 单击“添加”按钮时显示 React 组件

Question

我创建了一个 React 组件，当单击“新建部分”按钮时，该组件将显示。我现在遇到的问题是我希望它是，例如，如果单击按钮三次，则会显示三个部分。但是现在，当我单击“新部分”按钮时，会显示一个新部分，并且它位于正确的位置，但我无法再次单击它并显示更多部分。

Answer 1

你已经很接近了!

理论上您可以有无限数量的部分，因此 bool 值(真/假)不会削减它以显示更多部分。您需要做的是将其切换为整数(1、2、3 等)

所以一开始，你只有 1 个部分(我假设)，所以你的状态应该是 this.state = {sections: 1}

将按钮更改为 setState({sections: this.state.sections+1})因此，当单击新按钮时，它将添加到您的sections变量中。

现在为了让您的部分正确显示，您需要删除硬编码的 <Section />并将其替换为 for 循环。

for (var i=0; i < this.state.sections; i++) {
  <Section />
} 

如果这对您来说是这样，那么就是这样，但如果您想更进一步并将每个部分的值存储在sections变量中，则必须将sections用作数组。

this.state = {sections: [{your_attributes_here: your_values_here}]}

因此，无论何时单击按钮，现在都必须将新的sections对象推送到数组中。这可以简单地实现为

let sections = this.state.sections.push({section_info_here});
this.setState({sections: this.state.sections.push({section_info_here})});

并为这些部分生成 html 现在将是

{this.state.sections.map((section, i) => {
  return <Section sectionData={section}/>
})}

仅当您需要存储每个单独部分的数据时才使用此方法。任何一种方法都可以帮助您解决无法添加超过 1 个部分的问题。希望这有帮助!