reactjs - 配置 Jsx-control-statement codesandbox.io

Question

我正在练习对 condesanbox.io 安装的 jsx-control-statement 依赖项做出反应。当我添加任何控制语句时，它是未定义的。

如何在 codesandbox.io 中配置 jsx-control-statements。

Answer 1

这个问题可能是几个月前的问题，看起来提问者还没有找到解决方案，所以这是我的解决方案

解决方案：不要在 return 语句中只使用 jsx 语法，而是用 react 片段包装 jsx，下面是示例

 return (<>
    {user ? <Component1/>:<Component2/>}
  </>)

Answer 2

您将无法像在本地 babel 环境中那样在 codeandbox.io 中使用 jsx-control-statements。

（我想删除线在stackoverflow上不是一个东西？）~~import { If } from 'jsx-control-statements'例如，您必须访问If标签。~~

编辑：

我见过人们过去导入它（类似于这个例子https://github.com/PedroBern/react-tiger-transition/issues/2）但是，我相信你知道，jsx- control-statements lib 是一个 babel 插件；该示例中看到的代码可能仅用于在旧版本的控制语句中使 eslint 平静下来。

如果您将 jsx-control-statements 依赖项拉入代码沙箱并通过 将其转换为变量import whatever from 'jsx-control-statements'，然后查看“whatever”，您会发现它是一个函数。（有关完整代码，请参阅下面的链接。）

您可能会走上破解 babel-core 的简化版本的道路，并将其传递给whatever(babel)但您最好创建自己的 If 标签，该标签具有condition属性并有条件地呈现子级。

https://github.com/AlexGilleran/jsx-control-statements/blob/master/src/index.js