Question

我的问题涉及样式反应组件内联

我理解在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={{..}}构造背后的逻辑吗？

我在文档和其他参考资料中看到了这一点，但我没有看到任何解释，它只是显而易见地传递过来。

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

Answer 1

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

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

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

React：为什么内联样式需要双括号语法，样式{{..}}

1 个答案: