如何在 reactjs 中使用 jsx-control-statements？

Question

我在 React 应用程序中使用 jsx-control-statements 来添加基本控制语句。我已经使用 npm 安装了它并更新了 .babelrc 文件如下

{
  "presets": ["react"],
  "plugins": ["jsx-control-statements"]
}

我有下面的 jsx 代码

<IF condition={ selectedID !== null }>
 {this.renderData()}
</IF>

下面是启动selectID的函数，我只想在值不等于null时才执行renderData()

getInitialState() {
    return {
        selectedID: null
    }
},

截至目前，我收到控制台错误 "Uncaught ReferenceError: IF is not defined" 并且应用程序未加载。谁能告诉我这里有什么问题。需要帮助。

Answer 1

在 reactjs 中使用 jsx-control-statements 的最好方法是根本不使用它。为什么？因为在我公司，我们的项目中有它，它只会给我们带来不可读、错误和混乱的代码。

想一想，您是在鼓励将业务逻辑移至视图组件的 jsx 部分，该部分仅应用于输出已处理的数据。一开始，它可能看起来不错，但一段时间后，越来越多的逻辑就会出现问题。

所以在你的情况下你可以做的是这样的：

{selectedID !== null && this.renderData()}

Answer 2

有点晚了，但我只是在谷歌搜索时遇到了这个 - 你想使用 If 而不是 IF。

我想完全不用它也行:|。

How to use jsx-control-statements in reactjs?