Javascript Typescript-导入功能组件时出错

我正在将React

.js

文件迁移到

.tsx

文件，偶然发现了这个问题。下面是这个问题的一个简单例子

ParentComponent.tsx

import MyCustomComponent from './MyCustomComponent';

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

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”导入MyCustomComponent；
导出类ParentComponent扩展了React.Component{
render（）{
返回(
);
}
}

MyCustomComponent.tsx

import MyCustomComponent from './MyCustomComponent';

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

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

export const MyCustomComponent=（{customText}:{customText:string}）=>(
customText！=null&&customText.length>0&&
{customText}
);

行上有一条红色下划线，有以下错误：

[at loader]中的错误 /src/app/MyComponent.tsx:78:37 TS2605:JSX元素类型“false | element”不是JSX元素的构造函数。类型“false”不可分配给类型 “元素类”

[at loader]中的错误 /src/app/MyComponent.tsx:78:37 TS2607:JSX元素类不支持属性，因为它没有“props”属性

[at loader]中的错误 /src/app/MyComponent.tsx:78:52 TS2339:类型“{}”上不存在属性“customText”

---

任何帮助都将不胜感激。

customText！=null&&customText.length>0&…

将返回

false

，如果这两个条件都不是

true

，TypeScript将其解释为无效JSX

如果两个条件都不是

true

，则可以显式返回

null

，它将起作用：

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
);

export const MyCustomComponent=（{customText}:{customText:string}）=>(
customText！=null&&customText.length>0(
{customText}
)：null
);

自定义文本！=如果两个条件都不成立，null&&customText.length>0&&…

将返回

false

。如果编写

customText！=null&&customText.length>0？…：空值

？谢谢，这似乎有效。添加三元数是解决这个问题的唯一方法吗？在我们的项目中，我们使用了大量React的条件渲染，使用

&&

操作符（例如

someCheck&&

）@noblerever，我不确定是否诚实。我自己也没有找到另一种解决办法。我还喜欢在使用React with just JavaScript时使用

&&

，但还没有找到在TypeScript中实现这一点的方法。