我将从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>'
}
]
}
};在我的渲染函数中，我想循环遍历功能数组，然后在其周围输出一些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>
一旦我被擦拭以输出数据，我想将其变成某种形式的Actrocatian，我可以看到，我需要为每个人都有单独的状态值来隐藏并显示正确的状态。我如何将其纳入其中？
我尚未对此进行测试。但这应该起作用。
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渲染RAW HTML。
参考
演示：https：//jsfiddle.net/jwm6k66c/2565/
您可以这样做：
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/