React学习（一）如何通过style设置行内样式

官网有一个例子：

const user = {
  name: 'Hedy Lamarr',
  imageUrl: 'https://i.imgur.com/yXOvdOSs.jpg',
  imageSize: 90,
};

export default function Profile() {
  return (
    <>
      <h1>{user.name}</h1>
      <img
        className="avatar"
        src={user.imageUrl}
        alt={'Photo of ' + user.name}
        style={{
          width: user.imageSize,
          height: user.imageSize
        }}
      />
    </>
  );
}

在上面示例中，style={{}} 并不是一个特殊的语法，而是 style={ }JSX大括号内的一个普通 {} 对象。当你的样式依赖于 JavaScript 变量时，你可以使用 style 属性。

tips：行内样式的第一对花括号标志着表达式的开始，第二对花括号是包含样式和值的对象。需要注意的是，RN中style用法也是一样的！！！

{{ 和 }} 并不是什么特殊的语法：它只是包在 JSX 大括号内的 JavaScript 对象。

 

参考

React技巧之设置行内样式（比较详细！！）