Javascript 使用自定义渲染器在Antd AutoComplete中获取选定选项的值

我有一个Antd AutoComplete控件，它使用自定义渲染器，非常类似于这个分叉沙盒中的渲染器：

为了简单起见，我们假设呈现的项如下所示：

const renderItem = ({ id, name }) => ({
  value: id.toString(),
  label: (
    <div>
      {name}
    </div>
  )
});

这是因为，当您单击并选择一个条目时，AntD将显示该记录的

值。本例中的值必须是唯一标识符，或者我可以简单地使用标题

现在，在一个简单的列表中，我可以简单地提取handleSelect中的选定值并使用它：

const handleSelect=（值，选项）=>{
setDisplayedSearchValue（option.label）
}

这将解决设计难题，并显示标签而不是值。现在，使用嵌套和分组的数据源，该项实际上是一个组件和选项。label不再是一个字符串，而是一个react组件，我必须向下钻取以获得实际值：

const handleSelect = (value, option) => {
    setDisplayedSearchValue(option.label.props.children);
};

如果文本值之间有空格，则子项将成为一个数组，我必须使用
.join（“”）
，这会增加更大的复杂性。如果我更改了标记，并且嵌套在dom中的较低位置，我将不得不再次修改父选择器，这很容易出错，因为如果客户端想在搜索结果周围更活跃一些，它将很快变成
option.label.props.children.props.children.join（“”）

我觉得我在做一些基本的错误，在这里作出反应，以实现我想要的。
因此，问题是：当我从父组件单击子组件时，如何从子组件获取特定属性？
因此，实现它的最简单方法似乎是简单地向项添加一个附加属性
名称。antd将忽略它，但您仍然可以在
onSelect
处理程序中访问它：

const renderItem = ({ id, name }) => ({
  name,
  value: id.toString(),
  label: (
    <div>
      {name}
    </div>
  ),
});

对您的问题的简短回答是：您应该避免从子组件读取任何内容。这是很少需要的，而且有点违背了react的原则。我认为这很可能是XY问题。React应用程序是关于数据的，您不需要首先从提供给它的组件中读取数据。我想从
选项中读取值。值
并在原始数据源上查找应该是一个技巧。我将用一个可能的解决方案构思一个答案，但要清楚：
选项
应该只能是包含普通数据类型的对象，而不能是包含react元素的对象。如果您的目标是以不同的方式呈现选项，那么您可以通过提供一个知道如何呈现选项的组件来覆盖该行为。这是一个解决方案，由AntD的官方文档提供：是的，它的文档记录得很差，因为props API明确指出
选项
应该是
{label，value}[]
，但在示例中，它声明您也可以传递
{label，options}[]
。
Autocomplete
组件的api设计糟糕，因为您只能更改输入的呈现方式或选项的呈现方式，但不能同时更改两者。我真的不知道他们为什么选择这种API。事实上，它让你更难以一种反应的方式去实现你想要实现的目标。
const renderItem = ({ id, name }) => ({
  name,
  value: id.toString(),
  label: (
    <div>
      {name}
    </div>
  ),
});

const handleSelect = (value, option) => setDisplayedSearchValue(option.name);