遍历项目阵列反应

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/