如何在reactjs中使用jsx控制语句？

Im使用react应用程序中的jsx控制语句添加基本控制语句。我已经使用npm安装了相同的程序，并更新了.babelrc文件，如下所示

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

我有下面的jsx代码

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

---

到目前为止，我收到一个控制台错误，说uncaughtreferenceerror:IF未定义，应用程序未加载。有人能告诉我这里有什么不对吗。需要帮助。

在reactjs中使用jsx控制语句的最佳方法是根本不使用它。为什么？因为在我的公司，我们的项目中有它，它只会给我们带来不可读、有缺陷和混乱的代码

试想一下，您正在鼓励将业务逻辑移动到视图组件的jsx部分，该部分只应用于输出已处理的数据。一开始，它可能看起来不错，但过了一段时间，越来越多的逻辑就会出现，这将成为一个问题

因此，在您的情况下，您可以这样做：

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

---

有点晚了，但我只是在谷歌搜索时遇到了这个问题——你想用If而不是If

---

我想根本不用它也行：|。

天哪，业务逻辑和表示逻辑之间有区别。在表示层视图中，最终需要使用条件和迭代器来显示数据。这被称为表示逻辑，而jsx控制语句是一个插件，用于执行此操作，同时遵循jsx组件的声明性方法。有趣的是：您说jsx中的逻辑不好，但您的示例执行相同的逻辑，但更丑陋。如果你在写javascript，你最好强调javascript语法，如果你在写JSX，你必须强调JSX语法。如果您不使用jsx控制语句，最终将使用三元运算符和丑陋的比较，就像您在jsx代码中的示例一样，这是丑陋的。最后一件事：您使用的jsx AssignmentExpression，即{myExpression}，仅用于简单的数据输出，而不用于逻辑、迭代和条件。如果需要条件，必须将JXS代码块包装在条件中。这就是jsx-control-statements的目的。我在哪里说过jsx不好？我喜欢JSX。我所说的是，如果您有一些复杂的逻辑，最好使用一些易于重用和测试的逻辑将其提取到Javascript函数中，而不是创建一堆相互嵌套的JSX。否则对于简单的条件句，三元组就可以很好地完成它的工作。此外，在某些情况下，jsx控制语句可以正常工作，但应注意不要误用它。只是澄清jsx中的逻辑并不坏，但这取决于，若它是一个复杂的逻辑，那个么最好将它从呈现方法提取到Javascript函数中，以获得更好的重用性和可测试性，或者甚至将它提取到另一个组件中。因此，要么提取复杂的逻辑，要么只使用JSX就可以了。

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