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) 为全局可用元素添加声明 files/typings。例如。类似于：

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。因此，以上可能不一定能正常工作，您必须执行其他步骤。

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）

Conditionals in tsx-files (React + TypeScript)

reactjs

typescript

react-jsx