reactjs - React : why is double brace syntax, style{{..}}，内联样式必需

Question

我的问题涉及内联 react 组件的样式。

据我了解，在 JSX {variableName} 中，需要大括号来引用任何 JS 变量或表达式。

因此，使用以下构造添加内联样式对我来说很有意义。所需的样式存储在 JavaScript 变量中，然后在 JSX“标记”中引用为 style={divStyle}

const divStyle = {
  backgroundImage: `url(${avatarURL})`,
};

function HelloWorldComponent() {
  return (
    <div className='avatar' style={divStyle}>
      Hello World!
    </div>;
  )
}

但是当样式直接输入到 JSX“标签”中时，我没有看到与 style={{..}} 语法的联系，如下所示:

function HelloWorldComponent() {
  return (
    <div className='avatar' style={{backgroundImage: `url(${avatarURL})`}}>
      Hello World!
    </div>;
  )
}

有人可以解释一下 style={{..}} 构造背后的逻辑吗？

我在文档和其他引用 Material 中看到了这一点，但我没有看到任何解释，它只是被忽略了，就好像很明显一样。

由于这对我来说并不是 JS 表达式规则的明显扩展，因此我只使用了一组大括号，并且出现了错误。

Answer 1

您正在返回一个对象。因此，外部 {} 括号用于返回变量，内部 {} 括号用于创建对象。

重新格式化它可能会更有意义:

style={
  {
    backgroundImage: `url(${avatarURL})`,
    color: #ffffff,
    fontSize: 16px
  }
}