javascript - 在 React 中动态生成 JSX

Question

我想从数组中为选择表单生成选项。这是在 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。我在这里缺少什么才能让它发挥作用？

Answer 1

您不能从 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>
  );
}