Question

我正在尝试创建一个依赖选择框，该依赖选择框根据父选择列出了不同的列表。我以为代码失败了，因为这些选项需要包装在容器中，但是我不确定如果不想为每个状态重新创建选项，可以将它们包装在哪个容器中。

说实话，我什至不确定这是否是最好的解决方法。总的来说，我对React和JS还是很陌生。该公司在两个以上的州也设有办事处，所以也许有更好的方法来扩展规模？谢谢

到目前为止，我的代码：

<select
  className="select"
  name="selectCity"
  onChange={this.onCityChange}
>
  <option value="" defaultValue>Select a City</option>
  {
    this.state.state === 'california' && 
      <option value="los-angeles">Los Angeles</option> 
      <option value="san-diego">San Diego</option> 
  }
  {
    this.state.state === 'texas' && 
      <option value="austin">austin</option> 
      <option value="dallas">Dallas</option> 
  }
</select>

Answer 1

您是对的，即使您可以有多个元素而又没有父元素，但由于许多原因，这仍然不是最佳选择。

最好具有适当的数据结构并遍历数据集。例如：

const cities = {
  california: [
    { value: "los-angeles", name: "Los Angeles" },
    { value: "san-diego", name: "San Diego" }
  ],
  texas: [
    { value: "austin", name: "Austin" },
    { value: "dallas", name: "Dallas" }
  ]
  // and so on
};

<select
  className="select"
  name="selectCity"
  onChange={this.onCityChange}
>
  <option value="" defaultValue>Select a City</option>
  {cities[this.state.state].map( city => <option value={city.value}>{city.name}</option> )}
</select>

Answer 2

当您不想在DOM中使用换行元素时，可以使用React.Fragment将元素分组在一起。

<select className="select" name="selectCity" onChange={this.onCityChange}>
  <option value="" defaultValue>
    Select a City
  </option>
  {this.state.state === "california" && (
    <React.Fragment>
      <option value="los-angeles">Los Angeles</option>
      <option value="san-diego">San Diego</option>
    </React.Fragment>
  )}
  {this.state.state === "texas" && (
    <React.Fragment>
      <option value="austin">austin</option>
      <option value="dallas">Dallas</option>
    </React.Fragment>
  )}
</select>

Answer 3

您可以在此处采用几种方法。关注点分离使您的代码在以后更具可读性和可维护性。没有看到您的其余代码，我不确定确切如何插入您的组件。您如何看待类似

const cities = {
    'california': {
        'los-angeles': 'Los Angeles',
        'san-diego': 'San Diego',
    },
    'texas': {
        'austin': 'Austin',
        'dallas': 'Dallas',
    },
};

const getOptions = (state) => {
    const cities = Object.keys(cities[state]);
    return cities.map(city => <option value={city}>{cities[city]}</option>);
}

<select
    className="select"
    name="selectCity"
    onChange={this.onCityChange}
>
    <option value="" defaultValue>Select a City</option>
    {
        getOptions(this.state.state);
    }
</select>

逻辑&&运算符内的多个<options>

3 个答案: