reactjs - React TSX - 在 React 元素道具中使用 Lambda 表达式

Question

我有一个 SplitButton 并想在标签中使用 Lambda 表达式，如下所示：

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

但是，这给了我一个错误，提示“类型 {label: JSX.Element} 中缺少属性值，但类型 {label: ReactNode; value: string} 中需要属性值。”

有没有办法让 Lambda 表达式在 React 元素中作为 Prop 工作？

标签： reactjstypescripttsx

Answer 1

没必要label: ({...})，{}这里搞乱了代码。

改用这个：

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