在 React 中动态生成 JSX答案

【问题标题】：Dynamically generating JSX in React在 React 中动态生成 JSX
【发布时间】：2016-06-14 21:35:20
【问题描述】：

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

【问题讨论】：

标签： javascript dynamic reactjs jsx

【解决方案1】：

您不能从forEach 循环内部返回。您将希望使用 .map() 代替，这将返回一个新数组。更多关于maphere的信息。

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

【讨论】：

【解决方案2】：

使用地图或辅助功能检查链接https://egghead.io/lessons/react-dynamically-generated-components。开始的好地方

render: function(){
let options = ['book', 'cat', 'dog'];

    return(
        <div className="control-group">
            <select id="select-food" placeholder="Pick a food...">
               {options.map(food => <option key={id} value={food}>{food}</option>)}
            </select>
        </div>
    );
}

我的演示中的另一个解决方案

renderRepository() {
let repository = this.props.repositories.find((repo)=>repo.name === this.props.params.
repo_name);
let stars = [];
for (var i = 0; i < repository.stargazers_count; i++) {
stars.push('');
}
return(
<div>
<h2>{repository.name}</h2>
<p>{repository.description}</p>
<span>{stars}</span>
</div>
);
}
render() {
if(this.props.repositories.length > 0 ){
return this.renderRepository();
} else {
return <h4>Loading...</h4>;
}
}
}

【讨论】：