小编Sne*_*hal的帖子

我使用反应选择创建了一个选择组件。我需要将徽章附加到可用值为 false 的选项。我已经使用-实现了它

  const formatOptionLabel = ({ code, name, available }) => (
      <div className="ds-select-distibutor-step-container format-option" style={{ display: "flex", cursor:"none" }}>
        <div>{name}</div>
        {!available ?
        <div className="format-label" style={{ borderRadius: "12px" ,marginLeft: "auto", color: "#fff" , backgroundColor: "#aaa", padding: "2px 10px", fontSize:"12px"}}>
        <span>Coming Soon</span>
        </div>
        : ''}
      </div>
     );

以下 json 在运行时出现，我将其映射并用作选项 -

const options= [
    {code:"abc",name:"abc",rank:0,available:true},
    {code:"xyz",name:"xyz",rank:0,available:false},
    {code:"pqr",name:"pqr",rank:0,available:true}]

以下是我的自定义选择组件

     <Field 
              id="selectedDistributor"
              name="selectedDistributor" 
              component={customSelect} 
              options={sortBy(options, 'name').map(({ code, name, available}) => ({ code, name, available }))}
              formatOptionLabel={formatOptionLabel}
              className="select-step"
              placeholder="abc"
              touched={false}
              defaultValue="abc"
              requiredField
              > …