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-statementsbabel 插件而不是具有附加 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 + plugins 来转译你的 JSX。很有可能是您在切换到 TypeScript 之前的配置。

我自己没有使用 jsx-control-statements。因此，上述可能不需要正确工作，您必须执行其他步骤。