我想从数组中为选择表单生成选项。这是在 React 组件的渲染方法中并使用 JSX 进行转换。
render: function(){
return(
<div className="control-group">
<select id="select-food" placeholder="Pick a food...">
<option value="">select a food</option>
{Object.keys(this.state.foods).forEach((food) => {
return (<option value={food}>{food}</option>);
})}
</select>
</div>
);
}
我可以使用 console.log()
将 forEach
循环内的食物输出到控制台,这很好,但只是没有生成 HTML。我在这里缺少什么才能让它发挥作用?
最佳答案
您不能从 forEach
循环中返回。您需要改用 .map()
,这将返回一个新数组。更多关于 map
的信息 here .
render: function() {
return (
<div className="control-group">
<select id="select-food" placeholder="Pick a food...">
<option value="">select a food</option>
{Object.keys(this.state.foods).map((food) => {
return (<option value={food}>{food}</option>);
})}
</select>
</div>
);
}
关于javascript - 在 React 中动态生成 JSX,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/37822530/