javascript - typescript -导入React功能组件时出错

我正在将我的React .js文件迁移到.tsx文件，但偶然发现了这个问题。这是问题的一个简单的例子。

ParentComponent.tsx

import MyCustomComponent from './MyCustomComponent';

export class ParentComponent extends React.Component<{customText: string}> {
    render() {
        return (
            <MyCustomComponent customText={this.props.customText} />
        );
    }
}

MyCustomComponent.tsx

export const MyCustomComponent = ({ customText }: { customText : string }) => (
    customText != null && customText.length > 0 &&
    <tr>
        <td colSpan={12} className={"somecssclass"}>
            <div className={"somecssclass2"}>
                {customText}
            </div>
        </td>
    </tr>
);

<MyCustomComponent ... />行上有一个红色下划线，带有以下错误：


  [加载程序]中的错误
  ./src/app/MyComponent.tsx:78:37
      TS2605：JSX元素类型为'false | Element'不是JSX元素的构造函数。类型'false'不可分配给类型
  'ElementClass'。
  
  [加载程序]中的错误
  ./src/app/MyComponent.tsx:78:37
      TS2607：JSX元素类不支持属性，因为它没有'props'属性。
  
  [加载程序]中的错误
  ./src/app/MyComponent.tsx:78:52
      TS2339：类型“ {}”上不存在属性“ customText”。


任何帮助将不胜感激。

最佳答案

如果两个条件都不都是customText != null && customText.length > 0 && ...（TypeScript会将其解释为无效的JSX），则false将返回true。

如果两个条件都不都是null，则可以显式返回true，它将起作用：

export const MyCustomComponent = ({ customText }: { customText: string }) => (
  customText != null && customText.length > 0 ? (
    <tr>
      <td colSpan={12} className={"somecssclass"}>
        <div className={"somecssclass2"}>{customText}</div>
      </td>
    </tr>
  ) : null
);