javascript - 渲染 html 元素数组

Question

我想在我的组件中渲染一个 html 元素数组。将 data/html 存储在数组中的原因是因为我希望能够根据按钮单击动态加载新元素。 这就是我想要显示数组的方式:

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

这就是我启动组件和数组的方式:

  componentDidMount() {
        this.createProcessStep().then(step => {
            this.setState({steps: this.state.steps.concat(step)});
        });
    }
  export function createProcessStep() {
    this.setState({processStepCounter: this.state.processStepCounter += 1});
    return this.addStepToArray().then(d => {
        return this.reallyCreateProcessStep()
    });
  }
 addStepToArray = () => {
        const step = {
          ...Some variables...
        };
        return new Promise(resolve => {
            this.setState({
                stepsData: this.state.stepsData.concat(step)
            }, resolve)
        });
    };

“stepsData”是另一个数组，保存属于每个步骤的数据(变量)。另一方面，“steps”应该只包含 html。 这是一个步骤/元素的样子:

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

每个步骤中的这个按钮负责向数组加载/添加另一个步骤，这实际上是有效的。我的组件正确显示每个步骤，但是 react 无法正确呈现对元素/步骤的更改，这是 这么说，每当例如我更改输入字段的值， react 不会呈现这些更改。因此，我实际上可以单击“+”按钮来呈现新的 html 元素，但每当此元素发生更改时， react 只是忽略了所述变化的表型。请记住，这些步骤/元素的changeHandlers仍然有效。我可以更改输入字段、单选按钮、复选框等，这将完全实现它的目的 应该如此，但是“重新渲染”(或其他任何内容)不起作用。 对我在这里做错了什么有什么想法吗？谢谢!

Answer 1

虽然您当然可以击败您的方法来工作，但我建议您采用更常见的 react 方法。

您可以使组件在状态下正确显示自身。即，该状态中有多少步骤，您的组件就会显示。比让你的添加按钮添加必要的信息(信息，而不是格式化的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>
}