Question

我想知道JSX的最佳实践。所以JSX让你在html中有逻辑，它可以从map函数到条件逻辑等等。但是简单而且＆＃34;小＆＃34;逻辑位，我不确定。

关于此的最佳做法是什么？

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

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

VS

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

Answer 1

关于您的具体问题，没有＆＃34;权利＆＃34;方式或更好的做法。为你做些自然的事。

对于像你提出的那样的简单条件，我通常选择后一种选择

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

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

Answer 2

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

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

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

Answer 3

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

React Best Practice：JSX中的逻辑与函数

3 个答案: