React中的下拉列表组件

问题描述 投票:0回答:2

我必须在我的项目中使用来自语义UI反应的多个下拉列表。他们需要有不同的道具。看起来像这样

 <div className="wrapper">
        <img className="icon" src={iconA} alt="iconA"></img>
        <h1>A</h1>
        <Dropdown
          className="dropdown"
          search
          selection
          options={optionsA}
          placeholder="A"
          defaultValue="A"
          onChange={handleAChange}
        />
 </div>
 <div className="wrapper">
        <img className="icon" src={iconB} alt="iconB"></img>
        <h1>B</h1>
        <Dropdown
          className="dropdown"
          search
          selection
          options={optionsB}
          placeholder="B"
          defaultValue="B"
          onChange={handleBChange}
        />
 </div>

我想通过粘贴不同的道具来重构它并为此创建单个组件。请指导我如何最好地重构它。

javascript reactjs refactoring semantic-ui
2个回答
0
投票

您可以执行以下操作:


0
投票
const CustomDropDown = (props) => {
  const { 
    className,
    search,
    selection,
    options,
    placeholder,
    defaultValue,
    onChange
  } = props;

  return (
    <div className="wrapper">
          <img className="icon" src={iconA} alt="iconA"></img>
          <h1>A</h1>
          <Dropdown
            className={classname}
            search={search+
            selection={selection}
            options={optionsA}
            placeholder={placeholder}
            defaultValue={defaultValue}
            onChange={onChange}
          />
    </div>
  )
}

现在,这样调用组件,

© www.soinside.com 2019 - 2024. All rights reserved.