React JS：多次元配列をループし、正しいコンポーネントを決定/ロード

Question

Reactを使用して、APIからデータを取得しています。a sample of which can be seen here

Iはbody部（多次元配列）をループする必要があり、それが 'ブロック' の種類を決定する：

• テキスト
• 引用
• frameImgeBlock
を見出し
• quoteImageBlock
• frameQuoteBlock

どのブロックタイプに応じて、対応するReactコンポーネントを作成/ロードする必要があります（これらを個々のReactコンポーネントに分離する方が良いと思います）。

React/JSでこれにどのように接近するのが最善でしょうか？

誰かがより簡単なアプローチを提案できる場合は、APIの出力を微調整することができます。

Answer 1

あなたは、外部コンポーネントを呼び出すことになるので、同様に「翻訳」機能を使用することができます。

// Import external deps 

import Heading from './src/heading'; 

// Later in your component code 

function firstKey(obj) { 
    return Object.keys(obj)[0]; 
} 

getDomItem(item) { 
    const key = firstKey(item); 
    const val = item[val]; 
    switch (key) { 
    case "heading": 
     return <Heading heading={ val.heading } ...etc... /> 
    case "other key..." 
     return <OtherElm ...props... /> 
    } 
} 

render() { 
    // data is your object 
    return data.content.body.map(item => 
    this.getDomItem(item[firstKey(item)]) 
); 
}