javascript React-Select - 替换自定义选项内容的组件
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/52819756/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
React-Select - Replacing Components for custom option content
提问by user2190690
Using React-Select (version 2) I would like to have custom designed (select) options.
使用 React-Select（版本 2），我想要自定义设计（选择）选项。
The documentation suggests that Replacing Componentswould be a method that I could use to achieve this.
该文档表明，替换组件将是我可以用来实现这一目标的一种方法。
Unfortunately I'm unable to find examples that show implementations of this feature.
不幸的是，我无法找到显示此功能实现的示例。
Is there anyone that could present to me usage of this feature whereby you would have a simple custom option (perhaps a label and value that also includes an SVG graphic to the left of each option label).
有没有人可以向我展示此功能的用法，您将拥有一个简单的自定义选项（可能还有一个标签和值，每个选项标签左侧还包括一个 SVG 图形）。
Many thanks in advance
提前谢谢了
回答by duhseekoh
For a majority of use cases, you probably don't need to replace the full Option component. If you're looking to stay with the same overall structure and look and feel of the Option, but you want to display several blocks of text, or an image, or some other special treatment to the body of each option, there is an easier way.
对于大多数用例，您可能不需要替换完整的 Option 组件。如果您希望保持与 Option 相同的整体结构和外观，但希望显示多个文本块、图像或对每个选项的正文进行一些其他特殊处理，则有一个更简单的方法大大地。
That's to use the formatOptionLabelrender prop.
那就是使用formatOptionLabel渲染道具。
import React from "react";
import ReactDOM from "react-dom";
import Select from "react-select";
const options = [
{ value: "Abe", label: "Abe", customAbbreviation: "A" },
{ value: "John", label: "John", customAbbreviation: "J" },
{ value: "Dustin", label: "Dustin", customAbbreviation: "D" }
];
const formatOptionLabel = ({ value, label, customAbbreviation }) => (
<div style={{ display: "flex" }}>
<div>{label}</div>
<div style={{ marginLeft: "10px", color: "#ccc" }}>
{customAbbreviation}
</div>
</div>
);
const CustomControl = () => (
<Select
defaultValue={options[0]}
formatOptionLabel={formatOptionLabel}
options={options}
/>
);
ReactDOM.render(<CustomControl />, document.getElementById("root"));
https://codesandbox.io/embed/reactselect-formatoptionlabel-bde1q
https://codesandbox.io/embed/reactselect-formatoptionlabel-bde1q
https://react-select.com/props- search for formatOptionLabel
https://react-select.com/props- 搜索 formatOptionLabel
回答by Steve -Cutter- Blades
You can replace any component by including your override in the components property.
您可以通过在 components 属性中包含您的覆盖来替换任何组件。
<Select components={{Option: MyOption}} />
Something like:
就像是：
const MyOption = props => {
const { innerProps, innerRef } = props;
return (
<article ref={innerRef} {...innerProps} className="custom-option">
<h4>{props.data.artist}</h4>
<div className="sub">{props.data.title} </div>
</article>
);
};
<Select components={{Option: MyOption}} />
The innerRefand innerPropsproperties are very important, as they carry forward things like the hover and onClick needed by the Option. The datain props is where your option data is.
该innerRef和innerProps性能是非常重要的，因为它们承载喜欢通过期权所需的悬停和向前的onClick事情。该data道具是你选择的数据。
回答by x-yuri
Generally, you indeed want to use formatOptionLabelprop(no extra component). But in case you don't, you may override the Optioncomponent this way:
通常，您确实想使用formatOptionLabelprop（没有额外的组件）。但如果你不这样做，你可以通过Option这种方式覆盖组件：
import Select, { components } from 'react-select';
const CustomOption = ({ children, ...props }) => {
return (
<components.Option {...props}>
<img src={...} />
{children}
</components.Option>
);
};
function App() {
return (
<Select components={{Option: CustomOption}} ... />
);
}
Here I reuse the stock component (components.Option). This way I don't need to care about innerRefor something.
在这里，我重用了股票组件 ( components.Option)。这样我就不需要关心innerRef什么了。
