Html React最佳实践：JSX中的逻辑与函数

我想知道JSX的最佳实践。因此，JSX允许您在html中使用逻辑，它可以是映射函数，也可以是条件逻辑等等。但对于简单的“小”逻辑位，我不确定

这方面的最佳实践是什么

 getClassName = () => {
    return conditional
      ? "some class names hide"
      : "some class names";
  };

 <div
    className={ this.getClassName() }         
 />

getClassName=（）=>{
返回条件
？“某些类名隐藏”
：“一些类名”；
};

vs

---

关于您的具体问题，没有“正确”的方法或更好的做法。做你觉得自然的事

对于像您介绍的那样的简单条件，我通常选择后者

<div
    className={
       this.state.conditional
          ? "some class names hide"
          : "some class names"
    }
 />

---

对即将发生的事情有更直接的了解。如果它涉及更复杂的逻辑和更多的操作，那么就使用函数。

在jsx中使用逻辑位是一种非常常见的做法

我个人不喜欢它，因为它往往会降低渲染函数的可读性（并且当您不能清楚地看到您的代码如何处理所有可能的分支时，可能会导致错误）。 我更喜欢调用能够处理逻辑的函数

---

对于您的示例，我建议使用classnames包（）。

在这种情况下，我认为使用

classnames

包是最佳实践。我认为渲染功能应该是纯粹的，不要混入太多的逻辑。

从功能上来说，这些都是相同的，所以大部分都是个人喜好。对于简单的三元运算符，将它们内联通常是可以的，但是如果有任何实际的逻辑，那么最好将其放在它自己的函数中，这样就不会膨胀渲染函数，并且可以在它自己的空间中编辑逻辑。

<div
    className={
       this.state.conditional
          ? "some class names hide"
          : "some class names"
    }
 />