如何在反应中使用静态数据

我有超过40个选项的选择标签，所以我的组件看起来很蹩脚。我宁愿创建一个静态数据文件并遍历数据，但我是新的反应，不知道解决这个问题的正确方法。有任何想法吗？ YAML是反应应用程序的好主意吗？如何在反应中使用静态数据

render() { 
return (
    <div> 
    <h4>Choose an arrival train station</h4> 
    <select className='form-control' 
     value={this.state.selected} 
     onChange={event => this.onInputChange(event.target.value)}> 
     <option value="12th">12th St. Oakland City Center</option> 
     <option value="16th">16th St. Mission (SF)</option> 
     <option value="19th">19th St. Oakland</option> 
     <option value="24th">24th St. Mission (SF)</option> 
     <option value="ashb">Ashby (Berkeley)</option> 
     <option value="balb">Balboa Park (SF)</option> 
     <option value="bayf">Bay Fair (San Leandro)</option> 
     <option value="cast">Castro Valley</option> 
     <option value="civc">Civic Center (SF)</option> 
     <option value="cols">Coliseum</option> 
     <option value="colm">Colma</option> 
     ........ 
    </select> 
    <div>{this.state.selected}</div> 
    </div> 
);

来源

2016-07-22 Szilard Magyar

你应该只使用js;包括yaml可能会在网络上使用的东西，所以需要成为js，这只会使构建过程复杂化。制作选项大致如下：

const staticData = [ 
    { value: "...", label: "..." }, 
    // ... 
]; 

<select> 
{ staticData.map(o => <option value={o.value}>{o.label}</option>) } 
</select>

来源

2016-07-22 22:10:14

如何在反应中使用静态数据

回答

相关问题