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

Вам listItems в data.json является массивом.

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

Итак, когда вы получаете доступ listItems.color вы получаете не определено. Используйте listItems[0].color или обновите свой data.json до

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