我必须在我的项目中使用来自语义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>
我想通过粘贴不同的道具来重构它并为此创建单个组件。请指导我如何最好地重构它。
您可以执行以下操作:
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>
)
}
现在,这样调用组件,