显示数据

来源: 2024-05-26 13:52:06 播报

1、在 jsx 中使用花括号展示内容。

return (
  <h1>
    {user.name}
  </h1>
);

2、props属性传值显示,有普通字符串和变量。

return (
  <img
    className="avatar"
    src={user.imageUrl}
  />
);

props 属性值也可以是一个表达式。

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