Question

我有来自本地JSON文件的数据。每个记录都有一些文本（字符串）和一个另存为.gif的地图。我将gif文件放在./src内的文件夹中。我需要将正确的地图（gif文件）引用到正确的记录。

JSON数据文件的结构

[
    {
        "id": "someid",
        "text": "some text",
        "map": "map name"
    },
    ...
]

我有一个像这样的组件：

const Story = ({obj}) => (
    <Card className="item" id={obj.id}>
        {
            obj.map
            ? (<div className="card-img-none"></div>)
            : (<div className="card-img"></div>)
        }
            <CardBody>
                <CardTitle>{obj.text}</CardTitle>
                {
                    obj.map
                    ? (<div className={obj.map}></div>)
                    : null
                }
            </CardBody>
    </Card>
)

并渲染Story组件：

import data from './data.json';
...

<div>
    {
        this.state.data
        ? (
            this.state.data.map((i) => (
                <Story obj={i} key={i.id}/>
            ))
        )
        : ('Data not found')
    }
</div>

由于地图是gif，因此我尝试了以下操作：

导入每个gif并设置if then语句以检查是否object.map == gif file name并将gif文件呈现为<img src={mapName}/>，并设置css img {width: 100%}。这仅适用于一条记录，因为其他记录具有map键值对。
在index.css中为每个地图创建一个类（例如.mapName {background: url('./gif-file.gif') center no-repeat; background-size: cover;，然后像上面的代码一样渲染地图。它适用于所有地图。

但是，我遇到一个问题，我必须将map div的width和height设置为固定值，而不必设置width: 100%或height: 100%工作。值变成0。

似乎必须为此提供更好的解决方案。有想法吗？

Answer 1

如果您遇到相同的问题，我想出了一种解决方法（它可以工作，但我不确定这是最佳实践）：

import data from './data.json'; // Import data from json file
import map from '<relative path>/map.gif'; // Import gif file with relative path

// Inside the class
constructor(props) {
    super(props);
    this.state = {
        data: []
    };
}

componentDidMount = () => {
    data[3].map = map; // Add value to key 'map' of the target element in data array
    this.setState({data});
}

希望这会有所帮助。

从JSON反应渲染gif文件

1 个答案: