呈現一個html元素數組

我想在我的組件中呈現一個html元素數組。將數據/ html存儲在數組中的原因是因爲我希望能夠根據按鈕單擊來動態加載新元素。這是我要顯示我的數組：呈現一個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>

每個步驟中該按鈕是負責加載/添加又一步驟到所述陣列，其實際工作。我的組件正確顯示了每一步，但是反應並沒有正確地呈現對元素/步驟的更改，即可以說，只要我更改輸入字段的值，反應不會呈現這些更改。所以我實際上可以點擊「+」 - 按鈕來呈現新的html元素，但是每當發生此元素的更改時，反應就會忽略所述更改的表型。請記住，這些步驟/元素的changeHandlers仍然有效。我可以改變inputfields，radioButtons，複選框等，它將完成應該做的事情，但是「重新渲染」（或任何它）不起作用。任何想法我在做什麼錯在這裏？謝謝！

來源

2017-06-26 Felix

也許這可以幫助你？ https://www.npmjs.com/package/html-to-react –

你能解釋一下npm如何提供幫助嗎？以及它如何工作？它是圍繞一個組件包裝還是有什麼好處？ – Felix

嘿你設法解決這個問題？如果沒有，那麼：您的創建和添加工作正常，您提供了哪些代碼，但您是否也可以包含更新代碼？因此，我們可以看看並瞭解您處理它的方式！ – demonofthemist

雖然你當然可以打敗你的工作方法，但我會建議你採取更常見的反應方法。

你讓你的組件正確顯示自己的狀態。即在狀態中有很多步驟，您的組件將顯示。比讓你的添加按鈕添加必要的信息（信息，而不是格式化的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> 
}

來源

2017-06-26 14:10:22

你會推薦我作爲一種常見的反應方法嗎？ – Felix

我在第二段中寫了什麼。您的狀態包含顯示所有步驟所需的信息。您的組件正確呈現該信息。添加按鈕，只是將更多信息廣告到這些步驟。或者總結一下，通常只保存信息而不是格式化html，格式化留給組件。 –

你認爲在狀態中存儲html是不常見的 – Felix

呈現一個html元素數組

回答

相關問題