React:为什么内联样式需要双花括号语法{{..}}
我的问题涉及内联样式化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“ tag”时的语法的联系,如下所示:
function HelloWorldComponent() { return (
<div className='avatar' style={{backgroundImage: `url(${avatarURL})`}}>
Hello World!
</div>;
)
}
有人可以解释style={{..}}
构造背后的逻辑吗?
我在文档和其他参考资料中看到了这一点,但我没有看到任何解释,它似乎已经被忽略了。
因为这对我来说不是JS表达式规则的明显扩展,所以我只使用了一组大括号,并且遇到了错误。
回答:
您正在返回一个对象。因此,外部{}
括号用于返回变量,内部{}
括号用于创建对象。
重新格式化它,可能更有意义:
style={ {
backgroundImage: `url(${avatarURL})`,
color: #ffffff,
fontSize: 16px
}
}
以上是 React:为什么内联样式需要双花括号语法{{..}} 的全部内容, 来源链接: utcz.com/qa/430117.html