React.jsとJSON：動的スタイル？

Question

私はReact.jsでサイトを構築していますが、オブジェクトの背景色としてjsonファイルに格納されている16進値を使用するのに問題があります。どうやら、データは、レンダリングされたスタイルやコンテンツに影響を与えていないので、データは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）：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" 
    } 
} 

に更新してください