Question

我正在使用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"
}]}

Answer 1

listItems中的data.json是一个数组。

{
  "listItems": [ <--- array
    {
      "color": "#000000",
      "text": "hello world"
    }
  ]
}

因此，当您访问listItems.color时，您将获得未定义。使用listItems[0].color或将data.json更新为

{
  "listItems" {
    "color": "#000000",
    "text:": "hello world"
  }
}

Answer 2

您有一些语法错误。正如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：

React.js和JSON：动态样式？

2 个答案: