Question

我正在将我的React unlist( sapply( strsplit(x, " ?C"), function(x) { paste0("C", x[nzchar(x)]) } ) ) "C 10.1" "C 12.4" "C 12" "C 45.5" "C 10"文件迁移到.js文件中，偶然发现了这个问题。这是问题的一个简单例子。

ParentComponent.tsx

.tsx

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> );行上有一个红色下划线，带有以下错误：

[加载器]中的错误   ./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”。

任何帮助将不胜感激。

Answer 1

如果两个条件都不为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
);

打字稿-导入React功能组件时出错

1 个答案: