在 React 中动态生成 JSX

Question

我想从数组中为 select 表单生成选项。这是在 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

使用映射或辅助函数检查 link 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>;
}
}
}

Answer 2

您不能从 forEach 循环中 return。您需要改用 .map()，这将 return 一个新数组。有关 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>
  );
}

在 React 中动态生成 JSX

Dynamically generating JSX in React

javascript

dynamic

jsx

reactjs