React.js 및 JSON : 동적 스타일?

Question

React.js를 사용하여 사이트를 만들고 있는데 json 파일에 저장된 16 진수 값을 개체의 배경색으로 사용하는 데 문제가 있습니다. 어떻게 든 데이터는 렌더링 된 스타일이나 내용에 아무런 영향을 미치지 않으므로 데이터가 javascript 파일로 전달되지 않습니다 (JSON을 처음 사용하는 경우). 이것은 색깔, 원본, 등등을 위해 간다. 원조는 매우 평가 될 것입니다. 미리 감사드립니다!

자바 스크립트 (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) : data.json에

{ "listItems" : [ 

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

Answer 1

당신에게 listItems은 배열입니다.

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

따라서 listItems.color에 액세스하면 정의되지 않습니다. listItems[0].color을 사용하거나 data.json을

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

으로 업데이트하십시오.