は動的で、私が選択フォームの配列からオプションを生成したい

Question

に反応JSXを生成します。これは、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()を使用すると、新しい配列が返されます。 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>; 
 
} 
 
} 
 
}