typescript - tsx 文件中的条件(React + TypeScript)

Question

我们已经使用 React 和 jsx 一段时间了，对于条件语句，我们一直在使用我非常喜欢的 jsx-control-statements:

<If condition={something === true}>
    <div>Something</div>
</If>

最近我们的项目已经转移到 TypeScript，这很好，但是 jsx-control-statements 不再有效。原因是条件表达式不是 React 组件，而是在转译步骤中由 Babel 处理，这意味着 TypeScript 无法编译。

我有哪些选择？

我考虑过制作一个 If 组件，但它需要我将结果包装在一个新元素中，我不喜欢这样。

Answer 1

你没有提供足够的信息是什么对你不起作用，但我想这与 jsx-control-statements 的事实有关。是一个 babel 插件而不是一个带有额外 JSX 元素的库。

要使其与 TypeScript 一起工作，您需要:

(1) 为全局可用元素添加声明文件/类型。例如。像这样的东西:

declare function If (condition: any): any;
declare var Choose: any;
declare function When (condition: any): any;
declare var Otherwise: any;

(2) 在您的tsconfig.json 中将jsx 设置为preserve。您还可以将目标设置为 ES2015 并让 babel 完成工作。

(3) 使用 babel + 插件来转译你的 JSX。这很可能是您在切换到 TypeScript 之前的配置有效。

我自己并没有使用 jsx-control-statements。因此，以上可能不一定能正常工作，您必须执行额外的步骤。