React.js和JSON:动态样式?

时间:2017-01-24 02:18:01

标签: javascript json reactjs dynamic jsx

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

2 个答案:

答案 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:

render style/css from JSON file in React JS