我正在使用React.js构建网站,并且我在使用存储在json文件中的十六进制值作为对象的背景颜色时遇到了问题。不知何故,数据没有进入javascript文件(这是我第一次使用JSON),因为它对渲染的样式或内容没有影响。这适用于颜色,文字等。非常感谢协助。提前谢谢!
Javascript(ListItem.js):
import data from './data.json';
class ListItem extends Component {
render() {
var listItems = data.listItems;
var color = listItems.color;
var text = listItems.text;
var listItemStyle = {
width: '100px',
minHeight: '100px',
backgroundColor: color,
color: '#FFFFFF'
}
return (
<div style={listItemStyle}>
<h1>{text}</h1>
</listItemStyle>
);
}
}
export default listItem
JSON(data.json):
{ "listItems" : [
{ "color" : "#000000",
"text" : "hello world"
}]}
答案 0 :(得分:0)
listItems
中的data.json
是一个数组。
{
"listItems": [ <--- array
{
"color": "#000000",
"text": "hello world"
}
]
}
因此,当您访问listItems.color
时,您将获得未定义。使用listItems[0].color
或将data.json
更新为
{
"listItems" {
"color": "#000000",
"text:": "hello world"
}
}
答案 1 :(得分:0)
您有一些语法错误。正如CodinCat所说,您需要一个数组来读取Json文件。这是完整的代码和JSON文件。
JS代码:
import data from './testJson2.json';
import React, {Component} from 'react';
class ListItem extends Component {
render() {
let listItems = data.listItems;
let listItemStyle = {
width: '300px',
minHeight: '300px',
backgroundColor: listItems[0].color,
color: '#ff571a'
};
return (
<div style={listItemStyle}>
{listItems[0].text}
</div>
);
}
}
export default ListItem
Json文件:
{
"listItems": [
{
"color": "#FFF51E",
"text": "Rendered Json"
}
]
}
输出=>从React JS中的JSON文件渲染样式/ css: