[英]React.js and JSON: Dynamic Styles?
我正在使用 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"
}]}
data.json
中的listItems
是一个数组。
{
"listItems": [ <--- array
{
"color": "#000000",
"text": "hello world"
}
]
}
因此,当您访问listItems.color
您会得到未定义。 使用listItems[0].color
或将data.json
更新为
{
"listItems" {
"color": "#000000",
"text:": "hello world"
}
}
你有一些语法错误。 正如 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:
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.