在 React 中重构下拉组件

Question

我必须在我的项目中使用来自 semantic-ui-react 的多个下拉菜单。他们需要有不同的道具。看起来像这样

 <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>

我想重构它并通过传递不同的道具为此创建一个组件。请告诉我如何以最好的方式重构它。

Answer 1

您可以按照以下方式进行：

const DropDownWraper = ({
 header,
 options,
 onChange,
 iconProps,
 placeholde,
 defaultValue
 }) =>
    <div className="wrapper">
      <img
        className="icon"
        src={ iconProps.src }
        alt={ iconProps.alt } />
      <h1>{ header }</h1>
      <Dropdown
        search
        selection
        options={ options }
        className="dropdown"
        onChange={ onChange }
        placeholder={ placeholde } 
        defaultValue={ defaultValue } />
   </div>

Answer 2

首先，创建您的自定义 dropDown 组件并使用对象解构提取道具，您可以为道具本身提供默认值，但最好使用 PropTypes。

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>
  )
}

现在，像这样调用组件，

<CustomDropDown 
  className="dropdown"
  search
  selection
  options={optionsA}
  placeholder="A"
  defaultValue="A"
  onChange={handleAChange}
/>

在 React 中重构下拉组件

Refactor dropdown component in React

javascript

reactjs

refactoring

semantic-ui