React.js 和 JSON：动态样式？

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

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

{
  "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：