Question

当然，所有这些工作，但哪一个是jsx文件中ES6的最佳实践？（忽略格式化）。我的理解是，模板字符串主要（仅用于？）用于描述性控制台日志记录而不是常规用法？

<div className={`dropdown-menu dropdown-menu-media`}/>
<div className={"dropdown-menu dropdown-menu-media"}/>
<div className={'dropdown-menu dropdown-menu-media'}/>

我意识到单引号和双引号之间没有功能差异（除非你在两者之间交替以避免转义）......但是...是一个或另一个更常见或者它是＆＃34;完全＆＃ 34;品味问题＆＃39; ？即如果您正在浏览代码并看到单个和双引号随机更改为相同的案例/用法，并且您必须使其统一，您会使用哪个？

const inputProps = {
      onChange: this.onChange,
      className: 'form-control',
      id: "someId",
      status: 'active',
      isOpen: "open"
    };

Answer 1

使用JSX时，最佳做法是直接使用双引号（无括号），如果只是一个简单的字符串，或者在将var插入字符串时使用反引号

JSX尝试模仿HTML属性，使其在第一次学习时更易于访问，除此之外我发现它在扫描代码时提供了JSX属性和普通字符串之间清晰的视觉区别，因为它们可能是语法突出显示相同的颜色< / p>

更一般的用法......

反引号是ES6对模板文字的介绍，实际上只应该用于你想要做多行字符串的

单引号和双引号之间没有任何区别，但是根据我的经验，很长一段时间以来一直使用单引号（由linters支持）只是因为它使得可读代码更简洁

坚持跨项目的单一代码风格并通过linting强制执行也是一个好主意，因为它可以减少逃避错误

它通常取决于您使用的其他语言，因为某些语言允许在一个或另一个或Java中插值，例如单引号表示char而不是String

由于上述原因，我的偏好是值得的......

const awardWinningActor = 'Nic Cage'

const oscarNight = `And the award for Best Actor goes to ${awardWinningActor}`

const winnersSpeech = `Some really long but also totally awesome amazing speech
and also possibly some screaming and a leather jacket slung into the crowd`

<NicCage oscarFor="Best Actor" says={`Here's my ${winnersSpeech}`}} />

Answer 2

单引号或双引号是等价的，两者之间没有区别，当你希望字符串中的单词有双引号时，它们可以用作一个用例，然后你可以用单引号将整个字符串包装起来，反之亦然。但是，当您想要使用字符串

解析变量时，通常会使用反逻辑

例如

const inputProps = {
      onChange: this.onChange,
      className: 'form-control',
    };

<div className={`dropdown-menu dropdown-menu-media ${inputProps.className}`}/>

Answer 3

他们都不是。

<div className="dropdown-menu dropdown-menu-media"/>

当它们是JSX属性时双引号字符串文字。不要包装表达式{}块。

对于动态类名，请使用classnames包，而不是字符串连接。

<div className={
    classNames('dropdown-menu dropdown-menu-media', this.props.className)
}/>

JS引用最佳做法？ ES6 / React - 单人，双人，反击？

3 个答案: