React中如何为同一下拉组件传递两个选项数组实现复用？

我帮你梳理下代码里的几个问题，以及如何实现复用下拉组件的需求：

1. State结构错误 #

你在state里把options定义成了数组，但实际上你要存的是breakfast和dinner两个键值对，这应该是对象类型，而不是数组。数组不能用key: value的格式，这会导致你的数据无法被正确读取。

2. 属性名拼写错误 #

dinner数组里的每个对象属性写成了labe，正确的应该是label，这会导致下拉选项无法正确显示文本内容。

3. 组件复用思路偏差 #

你的需求是复用下拉组件，所以应该把DropDownDropper设计成一个通用的下拉容器组件，让它接收父组件传递的options props，而不是把所有选项都存在自身的state里。这样你就能在父组件中创建两组不同的数组，分别传递给两个DropDownDropper实例。

修正后的代码示例 #

第一步：重构通用下拉组件 #

class DropDownDropper extends React.Component { 
  render() { 
    // 直接使用父组件传递的options props
    return( 
      <div className="container"> 
        <div className="row"> 
          <div className="col-md-4"></div> 
          <div className="col-md-4"> 
            <Select options={this.props.options} /> 
          </div> 
          <div className="col-md-4"></div> 
        </div> 
      </div> 
    ); 
  } 
}

第二步：在父组件中使用并传递不同的选项 #

class ParentComponent extends React.Component {
  constructor(props) {
    super(props);
    // 在父组件中定义不同的选项数组
    this.breakfastOptions = [
      { label: "Location 1", value: 1 }, 
      { label: "Location 2", value: 2 }, 
      { label: "Location 3", value: 3 }, 
      { label: "Location 4", value: 4 }, 
      { label: "Location 5", value: 5 }, 
      { label: "Location 6", value: 6 }, 
    ];

    this.dinnerOptions = [
      { label: "Venue 1", value: 1 }, 
      { label: "Venue 2", value: 2 }, 
      { label: "Venue 3", value: 3 }, 
      { label: "Venue 4", value: 4 }, 
      { label: "Venue 5", value: 5 }, 
    ];
  }

  render() {
    return (
      <div>
        {/* 早餐下拉菜单 */}
        <h3>早餐选项</h3>
        <DropDownDropper options={this.breakfastOptions} />

        {/* 晚餐下拉菜单 */}
        <h3>晚餐选项</h3>
        <DropDownDropper options={this.dinnerOptions} />
      </div>
    );
  }
}

额外优化建议 #

• 如果你不需要在组件中维护状态，可以把DropDownDropper改成函数式组件，代码更简洁：

const DropDownDropper = ({ options }) => {
  return( 
    <div className="container"> 
      <div className="row"> 
        <div className="col-md-4"></div> 
        <div className="col-md-4"> 
          <Select options={options} /> 
        </div> 
        <div className="col-md-4"></div> 
      </div> 
    </div> 
  );
};

这样你就能轻松复用下拉组件，传递不同的选项数组来生成不同的下拉菜单啦！

内容的提问来源于stack exchange，提问作者okaycharm