동적으로 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> 
    ); 
} 

가 나는 출력은 HTML 그냥 잘 console.log()와 콘솔에 forEach 루프 내부에 음식 만 생성 점점되지 수 있습니다. 내가 그걸 작동 시키려면 여기에서 무엇을 놓치고 있습니까?

Answer 1

에

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

다른 해결책을 시작합니다. 대신 .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을 사용하십시오. 좋은 장소 내 데모 당신은 forEach 루프 내부에서 반환 할 수

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