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

Posted 2023-02-22

【中文标题】React 最佳实践：JSX 中的逻辑与函数

【英文标题】：React Best Practice: logic vs functions in JSX

【发布时间】：2018-06-25 01:47:20

【问题描述】：

我想知道 JSX 的最佳实践。所以 JSX 让你在 html 中拥有逻辑，它可以从映射函数到条件逻辑等等。但是对于简单和“小”的逻辑位，我不确定。

这方面的最佳做法是什么？

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

 <div
    className= this.getClassName()          
 />

对

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

【问题讨论】：

在功能上这些是相同的，所以主要是个人喜好。对于简单的三元运算符，内联它们通常是可以的，但如果有任何 actual 逻辑，那么最好将它放在自己的函数中，这样你就不会膨胀渲染函数，你可以编辑逻辑在自己的空间里。

【参考方案1】：

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

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

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

更直接地了解即将发生的事情。如果它涉及更复杂的逻辑和更多的操作，那就去一个函数。

【参考方案2】：

在 jsx 中使用逻辑位是很常见的做法。

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

至于您的示例，我建议使用 classnames 包 (https://github.com/JedWatson/classnames)。

【参考方案3】：

在这种情况下，我认为使用classnames 包是最佳做法。我觉得render函数应该是纯粹的，不要混入太多逻辑。