Question

我们一直在使用React和jsx，对于条件我们一直在使用jsx-control-statements，我非常喜欢：

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

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

我有什么选择？

我想过制作一个If-component，但是我需要将结果包装在一个我不喜欢的新元素中。

Answer 1

您没有提供足够的信息，但是我认为它与jsx-control-statements是一个babel插件而不是具有其他JSX元素的库有关。< / p>

要使其适用于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。因此，上述内容可能无法正常工作，您必须执行其他步骤。

Answer 2

我目前的工作情况相同 - 用jsx-control-statements编写的代码库我想要迁移到打字稿，所以我开始开发一个typescript compiler plugin，其目的是成为一个取代jsx-control-statements。

Answer 3

以下为我工作：

// global.d.ts
declare const If: React.FC<{ condition: boolean }>
declare const Choose: React.FC
declare const When: React.FC<{ condition: boolean }>
declare const Otherwise: React.FC

// .eslintrc
"extends": [
  'plugin:jsx-control-statements/recommended',
],
"rules": {
  "react/jsx-no-undef": [ "error", { "allowGlobals": true } ],
  // This rule doesn't work with typescript.
  // It reports code like `ReturnType<typeof something>` 
  // as `'something' is not defined`.
  "jsx-control-statements/jsx-jcs-no-undef": "off",
}

我没有添加<With>和<For>的定义，因为不知道如何使其与TS完全兼容。而且我个人认为这些标签有害无益。

tsx文件中的条件（React + TypeScript）

3 个答案: