我将从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>
一旦我能够输出数据，我想把它变成某种形式的手风琴，我可以看到我需要为每个隐藏的状态值分别隐藏和显示正确的状态值。我如何将其纳入此内容？
答案 0 :(得分：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
答案 1 :(得分：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>
)
}