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

我可以输出forEach循环到控制台内部的食品与console.log()就好了，但HTML只是不获取生成。我在这里错过了什么让它起作用？

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

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