时间戳

首页 > 解决方案 > 如何使用 React-select 创建单独的 DropdownIndicator 组件，以便它可以在项目的其他部分重用

javascript - 如何使用 React-select 创建单独的 DropdownIndicator 组件，以便它可以在项目的其他部分重用

问题描述

当我将 DropdownIndicator 组件保存在同一个文件中时，以下代码可以正常工作。

但我想将 DropdownIndicator 保存在单独的文件中，以便可以重复使用。就像将其保持为单独的组件并在其他文件中使用它，例如在下拉字段中显示插入符号向上和向下图标的任何地方。

类似的例子如下

import ReactDOM from "react-dom";
import Select, { components } from "react-select";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faCaretDown, faCaretUp } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
import "./styles.css";

library.add(faCaretDown);
library.add(faCaretUp);

const colourOptions = [
  {
    label: "Orange",
    value: "orange"
  },
  {
    label: "Blue",
    value: "blue"
  },
  {
    label: "Purple",
    value: "purple"
  }
];

const Placeholder = (props) => {
  return <components.Placeholder {...props} />;
};
let isOpen = false;
const CaretDownIcon = () => {
  return <FontAwesomeIcon icon="caret-down" />;
};

const CaretUpIcon = () => {
  return <FontAwesomeIcon icon="caret-up" />;
};

const DropdownIndicator = (props) => {
  return (
    <components.DropdownIndicator {...props}>
      {isOpen ? <CaretDownIcon /> : <CaretUpIcon />}
    </components.DropdownIndicator>
  );
};

function App() {
  return (
    <div className="App">
      <Select
        closeMenuOnSelect={false}
        onMenuOpen={() => (isOpen = true)}
        onMenuClose={() => (isOpen = false)}
        components={{ Placeholder, DropdownIndicator }}
        placeholder={"Choose"}
        styles={{
          placeholder: (base) => ({
            ...base,
            fontSize: "1em",
            color: colourOptions[2].value,
            fontWeight: 400
          })
        }}
        options={colourOptions}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

标签： javascriptreactjsuser-interfacefrontend

解决方案

首先，您持有 isOpen 标志的方式并不理想，因为它会使所有当前选择的指标发生变化。

要提取组件，您可以利用传递给自定义 DropdownIndicator 的选择道具并使用它而不是您的标志。

这是一个工作沙箱：

https://codesandbox.io/s/custom-dropdown-indicator-5shel

推荐阅读