React TSX 如何在SplitButton组件的label属性中使用Lambda表达式

当前代码出现类型错误的核心原因是label赋值时存在语法问题：在对象属性赋值场景下，你给label值外层额外套的{}会被识别为对象包裹符，而非JSX表达式插值符，导致TS将label后的内容错误解析为一个独立对象，后续的value属性没有被正确识别到当前option配置项中，因此抛出“缺少value属性”的类型错误。
另外你当前写的逻辑并不是Lambda表达式，只是普通的三元运算返回JSX元素，属于合法的ReactNode类型，组件本身是支持的。

分两种适用场景：

仅用外部状态动态生成label #

即你当前的场景，只依赖组件外的hasValues、isSelected状态渲染label，直接修正语法即可：

<SplitButton
  options={[
    {
      label: hasValues && isSelected.length === 0 ? (
        <FormattedMessage defaultMessage="Text A"/>
      ) : (
        <FormattedMessage defaultMessage="Text B"/>
      ),
      value: "myValue",
    },
  ]}
/>

需要用Lambda接收组件内部参数动态渲染 #

如果需要拿SplitButton内部暴露的状态（如下拉项的hover、激活状态）做渲染逻辑，且组件原生不支持label为函数类型时，可以自行封装一层做兼容：

// 扩展Option类型，支持函数类型label
type CustomOption = {
  label: React.ReactNode | ((innerParams: {isHovered: boolean; isActive: boolean}) => React.ReactNode);
  value: string;
}

// 封装自定义SplitButton
const CustomSplitButton = (props: Omit<SplitButtonProps, 'options'> & {options: CustomOption[]}) => {
  // 此处替换为SplitButton实际暴露的内部参数
  const innerParams = {isHovered: false, isActive: false};
  const processedOptions = props.options.map(option => ({
    ...option,
    label: typeof option.label === 'function' ? option.label(innerParams) : option.label
  }));
  return <SplitButton {...props} options={processedOptions} />
}

// 调用时即可传入Lambda表达式
<CustomSplitButton
  options={[
    {
      label: ({isHovered}) => isHovered ? <FormattedMessage defaultMessage="Hover状态文本" /> : <FormattedMessage defaultMessage="普通状态文本" />,
      value: "myValue"
    }
  ]}
/>

如果是TS项目，还可以通过模块声明直接扩展原有SplitButton的Option类型，无需修改组件调用逻辑。

内容的提问来源于stack exchange，提问作者inconnu