时间戳

首页 > 解决方案 > 如何将 .json 文档中的样式属性导入反应组件？

javascript - 如何将 .json 文档中的样式属性导入反应组件？

问题描述

我想做的是将宽度、高度和样式属性导入反应组件。我将首先显示带有对象属性的 .json 文档：

            "manufacturerData": {
                "name": "Duesenberg",
                "articleCount": 0,
                "image": {
                    "file": "duesenberg.jpg",
                    "width": "140",
                    "height": "52",
                    "exists": true
                }
            },

我想将样式：宽度和高度导入到我的图像卡容器中，如下所示：

  return (
    <Card className='my-3 p-3 thumbnail' style={{ width: '14rem' }}>
      <a href={`/articles/${articles.id}`}>
        <Card.Img src={`/images/${articles.image.file}`} variat='top' />
      </a>
    </Card>
  )

我似乎无法在网上找到任何关于如何完成这项工作的直接信息。我非常感谢您的帮助。

标签： javascripthtmlcssreactjs

解决方案

  return (
    // by default 'px' units will be assumed. You can add any other unit explicitly
    <Card className='my-3 p-3 thumbnail' style={{ width: articles.image.width }}>
   // <Card className='my-3 p-3 thumbnail' style={{ width: `${articles.image.width}rem` }}>
      <a href={`/articles/${articles.id}`}>
        <Card.Img src={`/images/${articles.image.file}`} variat='top' />
      </a>
    </Card>
  )

推荐阅读