Javascript 呈现html元素数组

我想在我的组件中呈现一个html元素数组。将data/html存储在数组中的原因是，我希望能够根据按钮单击动态加载新元素。 以下是我希望显示阵列的方式：

 <div>
       {this.state.steps}
 </div>

“stepsData”是另一个数组，它保存属于每个步骤的数据（变量）。另一方面，“步骤”应该只包含html。 这是一个步骤/元素的外观：

<div>
 ...Some Content...
 <button label="+" onClick={ () => {
                            this.createProcessStep().then(step => {
                                this.setState({
                                    steps: this.state.steps.concat(step)
                                });
                            })
                        }}/>
 ...other content...
</div>

…一些内容。。。
{
这个.createProcessStep（）.then（步骤=>{
这是我的国家({
步骤：this.state.steps.concat（步骤）
});
})
}}/>
…其他内容。。。

每个步骤中的这个按钮负责将另一个步骤加载/添加到数组中，这实际上是可行的。我的组件正确显示每个步骤，但是react不会正确呈现对元素/步骤的更改，这是错误的 也就是说，每当我更改输入字段的值时，react不会呈现这些更改。所以我可以点击“+”按钮来呈现新的html元素，但是每当这个元素发生变化时， react只是忽略了上述变化的表型。请记住，这些步骤/元素的ChangeHandler仍然有效。我可以更改输入字段、单选按钮、复选框等，这将完全实现它的功能 然而，应该是这样的，“重新渲染”（或者不管它是什么）不起作用。

---

你知道我做错了什么吗？谢谢

虽然你肯定可以击败你的方法来工作，但我建议你采取更普通的方法

您可以使组件从状态正确显示自己。ie由于许多步骤处于该状态，您的组件将显示。然后让“添加”按钮向状态添加必要的信息（信息，而不是格式化的html）

下面是如何使用组件N次的示例：

const MyRepeatedlyOccuringComponent = (n) => (<p key={n}>There goes Camel {n}</p>)

const App = () => {
 const camels = [1,22,333,4444,55555]
 const caravan = camels.map((n) => MyRepeatedlyOccuringComponent(n))
 return(<div>{caravan}</div>
}

const MyRepeatedlyOccuringComponent=（n）=>（
这里有Camel{n}
）
常量应用=（）=>{
常数骆驼=[1,223334445555]
const caravan=camels.map（（n）=>MyRepeatedlyOccuringComponent（n））
返回（{caravan}
}

也许这对你有帮助？你能解释一下这个npm是如何帮助你的吗？它是如何工作的？它是否包装了一个组件，或者有什么好处？嘿，你设法解决了这个问题？如果没有，那么：你的创建和添加工作正常，你提供的代码可以，但是你也可以包含更新代码吗？这样我们就可以看看并了解一下你的处理方式！你会推荐我什么作为常用的反应方法？我在第二段中写的。你的状态包含显示所有步骤所需的信息。你的组件正确地呈现这些信息。添加按钮，只是在步骤中添加更多信息。或者总结一下，通常只保留状态信息设置html而不是格式化的html，格式化是留给组件的。您认为将html存储在状态中并不常见我认为这有点违背了组件和状态之间职责的分离。还有一些需要澄清的问题。虽然您可能有充分的理由尝试将html存储在状态中，但需要“根据按钮点击动态加载新元素”不是其中之一，因为这一需求可以很容易地得到满足，而无需在状态中存储html

const MyRepeatedlyOccuringComponent = (n) => (<p key={n}>There goes Camel {n}</p>)

const App = () => {
 const camels = [1,22,333,4444,55555]
 const caravan = camels.map((n) => MyRepeatedlyOccuringComponent(n))
 return(<div>{caravan}</div>
}