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”是另一个包含属于每个步骤的数据（变量）的数组。另一方面，“步骤”应该只持有html。这就是一个步骤/元素的样子：

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

每个步骤中的此按钮负责向阵列加载/添加另一个步骤，这实际上是有效的。我的组件正确显示每个步骤，但是反应没有正确地呈现元素/步骤的更改，即无论何时，例如，我更改了输入字段的值，react不会渲染这些更改。所以我实际上可以单击“+” - 按钮来呈现新的html元素，但每当发生对该元素的更改时，反应只是忽略了所述变化的表型。请记住，这些步骤/元素的changeHandlers仍然有效。我可以更改输入字段，radioButtons，复选框等，这将完全符合它的要求应该，但“重新渲染”（或其他任何东西）不起作用。我在这里做错了什么想法？谢谢！

Answer 1

虽然你当然可以打败你的工作方式，但我会建议你采取更常见的反应方法。

使组件能够从状态正确显示自己。即，在该状态下有许多步骤，您的组件将显示。然后让你的添加按钮向状态添加必要的信息（信息，而不是格式化的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>
}

渲染一个html元素数组

1 个答案: