反应选择将自定义组件渲染为 SingleValue

Question

我需要使用react-select打字稿在所选值之前显示一个图标。

这是我到目前为止所尝试的：

SingleValue: React.SFC<SingleValueProps<OptionType>> = ({ children, ...props }) => (
    <components.SingleValue {...props}>
      <i className={`fal fa-${this.props.icon} has-text-grey-light`} /> {children}
    </components.SingleValue>
  )

主要问题是类型定义期望传递给的子级components.SingleValue必须是字符串。

Answer 1

您不必使用标准组件。您可以轻松创建自定义样式，但仍保留其所需的样式。

\n\n

您需要的唯一要求是emotion获取SingleValue组件使用的样式。

\n\n

/**\n * This Example uses the `FontAwesome` React library.\n**/\n\nconst options = [\n  { label: "Value A", value: "a", icon: faCoffee },\n  { label: "Value B", value: "b", icon: faCar },\n  { label: "Value C", value: "c", icon: faMobile },\n  { label: "Value D", value: "d", icon: faCircle },\n  { label: "Value E", value: "e", icon: faSquare }\n];\n\nconst SingleValue = ({\n  cx,\n  getStyles,\n  selectProps,\n  data,\n  isDisabled,\n  className,\n  ...props\n}) => {\n  console.log(props);\n  return (\n    <div\n      className={cx(\n        emotionCss(getStyles("singleValue", props)),\n        {\n          "single-value": true,\n          "single-value--is-disabled": isDisabled\n        },\n        className\n      )}\n    >\n      <FontAwesomeIcon icon={data.icon} style={{ marginRight: 10 }} />\n      <div>{selectProps.getOptionLabel(data)}</div>\n    </div>\n  );\n};\n\nexport default class MySelect extends Component {\n  render() {\n    return (\n      <Select\n        options={options}\n        components={{ SingleValue }}\n        styles={{\n          singleValue: (provided, state) => ({\n            ...provided,\n            display: "flex", // To keep icon and label aligned\n            alignItems: "center"\n          })\n        }}\n      />\n    );\n  }\n}\n

\n\n

工作示例

\n