控制选择框中所选值的外观：有没有办法单独渲染所选项目？

我正在与antd'选择框 https://ant.design/components/select/。我尝试自定义里面的内容Option其中包含常规的text与一些 JSX。它看起来如下：

这也是我在沙箱上准备的小演示：

由于我已经自定义了里面的内容Option，当我使用选择框做出选择时，它会显示为：

正如您所看到的，选择框尝试显示所有内容。有没有办法在使用选择框做出选择后控制选择框的外观？我只想在选择后显示名称。例如，product-1选择第一个选项时必须显示。

为了方便参考，我也将代码贴在这里：

    import React from "react";
import ReactDOM from "react-dom";
import "antd/dist/antd.css";
import "./index.css";
import { Select } from "antd";

const { Option } = Select;

const data = [
  {
    productName: "product-1",
    productExternalId: "DT01A",
    productionExternalId: "PL-DT01A",
    quantity: "700 kg"
  },
  {
    productName: "product-2",
    productExternalId: "DT01A",
    productionExternalId: "PL-DT01A",
    quantity: "700 kg"
  },
  {
    productName: "product-3",
    productExternalId: "DT01A",
    productionExternalId: "PL-DT01A",
    quantity: "700 kg"
  }
];

const ProductSelectBox = React.memo(props => {
  const { details } = props;

  function onSelect(value, option) {
    console.log(value, "..", option);
  }

  function customizedOption({
    productName,
    productExternalId,
    productionExternalId,
    quantity
  }) {
    return (
      <Option
        className="product-select-box-item"
        key={productName}
        value={productName}
      >
        <div className="d-flex flex-column">
          <div className="d-flex" style={{ marginBottom: "0.2rem" }}>
            <div className="mr-auto-1 font-weight-bold">{productName}</div>

            <div className="uppercase">{productionExternalId}</div>
          </div>

          <div className="d-flex" style={{ marginBottom: "0.01rem" }}>
            <div className="mr-auto-1 uppercase">{productExternalId}</div>
            <div>{quantity}</div>
          </div>
        </div>
      </Option>
    );
  }

  return (
    <Select
      // labelInValue
      // defaultValue={{ key: "product-3", label: "product-3" }}
      className="product-select-box"
      size="large"
      onSelect={onSelect}
    >
      {details.map(product => customizedOption(product))}
    </Select>
  );
});

ReactDOM.render(
  <div>
    <ProductSelectBox details={data} />
  </div>,
  document.getElementById("container")
);

参考自你的评论 https://stackoverflow.com/questions/56680158/having-a-tree-structure-on-both-sides-of-the-transfer-component/56858970?noredirect=1#comment100484326_56858970:

要修复您的警告，请在customizedDisplayOnSelection and getSelectedMeta你应该返回一个ReactNode而不是一个string，例如您可以返回null这是一个有效的ReactNode或不返回任何东西。

function customizedDisplayOnSelection(productName) {
  if (productMap[productName]) {
  ...
  }
  // or
  else {
    return null;
  }
}

此外，您还可以利用&&短路。

const customizedDisplayOnSelection = productName =>
  productMap[productName] && (
    <span className="font-weight-medium">
      {productMap[productName].productExternalId} -{productName}
    </span>
  );

检查固定示例：