我想从一个数组中为select表单生成选项.这是在React组件的render方法中,并使用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()代替,它将返回一个新数组.有关更多信息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>
  );
}