Question

我有一个包含40多个选项的select标签，所以我的组件看起来非常蹩脚。我宁愿创建一个静态数据文件并迭代数据，但我是新的反应，不知道解决这个问题的正确方法是什么。有任何想法吗？ 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>
);

Answer 1

你应该只使用js;包括yaml可能会在网络上使用的东西，因此需要js反正只会使你的构建过程复杂化。选项看起来大致如下：

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

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

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

1 个答案: