IT技术 - React：为什么内联样式需要双大括号语法 style{{..}} - 吾爱随笔录

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

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

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

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

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

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

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

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

我在文档和其他参考资料中看到了这一点，但我没有看到任何解释，只是被忽略了，好像很明显。

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