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

Question

当我将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);

Answer 1

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

要提取组件，您可以利用传递给自定义DropdownIndicator的select道具，并使用它来代替您的标志。

这是一个工作沙盒：

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