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

【问题标题】：Conditionals in tsx-files (React + TypeScript)tsx 文件中的条件（React + TypeScript）
【发布时间】：2017-03-07 13:41:14
【问题描述】：

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

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

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

我有什么选择？

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

【问题讨论】：

不同之处在于，将条件语句实现为 React 组件，我们必须将语句的内容包装在一个额外的元素中。此外，不必重新实现 jsx-control-statements 已经做得很好的东西也很好。

标签： reactjs typescript react-jsx

【解决方案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。因此，上述操作可能无法正常工作，您必须执行其他步骤。

【讨论】：

我更喜欢选项 2-3，让 babel 像以前一样使用 jsx。
我猜这是步骤而不是选项。 :D 因为 TypeScript 不知道 <If> JSX 元素。
谢谢！很抱歉描述模糊。正如您所想，我的问题是，TypeScript 无法编译，因为它无法识别语句。第 1 步解决了问题，我相信第 2 步和第 3 步已经到位:)

【解决方案2】：

我在目前的工作中处于同样的情况 - 使用 jsx-control-statements 编写的代码库，我想迁移到 typescript，所以我开始开发一个 typescript compiler plugin，它旨在成为 @ 的替代品987654323@.

【讨论】：

【解决方案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 完全兼容。而且我个人认为这些标签有害无益。

【讨论】：