配置Jsx控制语句codesandbox.io

Question

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

如何在codesandbox.io中配置jsx控制语句。

Answer 1

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

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

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

Answer 2

您将不能像在本地babel环境中那样在codesandbox.io中使用jsx控制语句。

(我猜stackoverflow上不存在删除线？)例如，您必须使用import { If } from 'jsx-control-statements'才能访问If标记。

编辑

我曾经见过人们在过去导入它(类似于这个示例https://github.com/PedroBern/react-tiger-transition/issues/2 )，但是，我相信您已经知道，jsx-control-statements库是一个babel插件；在那个示例中看到的代码可能只是用来消除旧版本控制语句中的eslint。

如果您将jsx控制语句依赖项放入codesandbox中，并通过import whatever from 'jsx-control-statements'将其转换为变量，然后查看“that”，您将看到它是一个函数。(有关完整代码，请参阅下面的链接。)

您也许可以采用简化的babel-core版本，并将其传递到whatever(babel)中，但最好创建自己的If标记，该标记具有condition属性并有条件地渲染子对象。

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