在React中动态生成JSX

Question

我想从一个数组中为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>
    );
}

我可以很好地将forEach循环内的食物输出到控制台console.log(),但HTML不会生成.我在这里错过了什么才能让它发挥作用？

Answer 1

你不能从forEach循环中返回.您将要使用.map(),它将返回一个新数组.有关map 此处的更多信息.

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>
  );
}