遍歷項目陣列反應

Question

我會從一個API來得到一些數據，將有一個狀態對象，看起來像這樣：

constructor(props) { 
 
super(props); 
 
this.state = { 
 
    searchable: false, 
 
    selectValue: 'day-to-day-banking', 
 
    clearable: false, 
 
    data: { 
 
    features: [ 
 
     { 
 
     body: '<h3 id="day-to-day-banking">Day to Day Banking</h3> <h2>Personal banking that looks out for you</h2> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p>', 
 
     features: '<ul> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> </ul>' 
 
     }, 
 
     { 
 
     body: '<h3 id="day-to-day-banking">Day to Day Banking</h3> <h2>Personal banking that looks out for you</h2> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p> <p>Whether you’re at home or abroad, you can always speak to us in the UK 24 hours a day, 7 days a week. Easily keep up to date with your money by using our digital services.</p>', 
 
     features: '<ul> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> <li>No cash withdrawal fees from Santander branded cash machines abroad with the Gold Visa debit Card except Poland</li> </ul>' 
 
     } 
 
    ] 
 
    } 
 
};

在我的渲染功能，我想循環訪問features數組，然後輸出一些html。我如何去做這件事？對於我的失敗反應和學習，我仍然是新的。

for (var i = 0; i <= this.state.data.features.length; i++) { 
 
    <p>data to go here</p> 
 
}

編輯：

這是我想重複HTML：

<div className="feature"> 
       //this is where the body copy should go 
       <div className="additional-benefits-container"> 
       <div className="additional-benefits-title" onClick={this.handleBenefitsClick}> 
        <p>Additional benefits</p> 
        <span className="dropdown-arrow"/> 
       </div> 
       <div className="additional-benefits-wrapper"> 
        <div className="additional-benefits"> 
        //this is where my benefits data goes from the features array 
        </div> 
       </div> 
       </div> 
      </div> 

一旦我一直體健輸出我會希望將數據把它變成某種形式的手風琴，我可以看到我需要分別爲每個隱藏和顯示正確的狀態值。我如何將這一點納入到這個？

Answer 1

你可以這樣說：

render(){ 
    const { data } = this.state; 
    return (
     <div> 
     { data.features.map((feature, index) => { 
      return <div className="feature" key={index}> 
      <div dangerouslySetInnerHTML={{__html: feature.body}} />; 
       <div className="additional-benefits-container"> 
       <div className="additional-benefits-title" onClick={this.handleBenefitsClick}> 
        <p>Additional benefits</p> 
        <span className="dropdown-arrow"/> 
       </div> 
       <div className="additional-benefits-wrapper"> 
        <div className="additional-benefits" dangerouslySetInnerHTML={{__html: feature.features}} />; 
       </div> 
       </div> 
      </div> 
     }) } 
     </div> 
    ) 
    } 

看看這個小提琴：https://jsfiddle.net/dcantir/Lr4e9kvs/

Answer 2

我還沒有測試過這個。但它應該工作。

render(){ 

     let data = []; 

     if(this.state.data.features.length>0){ 
      this.state.data.features,forEach((val,i)=>{     
     data.push(<div key={i}>  
       <div dangerouslySetInnerHTML={{__html:val.body}}/> 
      <div dangerouslySetInnerHTML={{__html: val.features}}/> 
      </div> 
      ) 
     }) 

     return(
      <div>{data}</div> 

     ) 
     } 

注意：您需要使用dangerouslySetInnerHTML來呈現原始html。
Reference

DEMO：https://jsfiddle.net/jwm6k66c/2565/