在React中重构下拉组件

我必须在我的项目中使用来自语义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>

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

评论
  • 花裤衩
    花裤衩 回复

    首先,创建自定义的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}
    />
    
  • ksit
    ksit 回复

    您可以按照以下步骤进行操作:

    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>