html - react 最佳实践 : logic vs functions in JSX

Question

我想知道 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"
    }
 />

Answer 1

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

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

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

更直接地了解将要发生的事情。如果它涉及更复杂的逻辑和更多的操作，那么就去寻找一个功能。