動的に作成されたReactコンポーネントは、大文字でもHTMLとしてレンダリングされます。

Question

動的な名前のReactコンポーネントをレンダリングしようとしています。 JSXでは、変数名を大文字にする必要があることを理解しています。私は私の状態の上にマッピングし、コンポーネントを移入しようとすると、しかし、私は次のエラーを取得する：

Warning: <TextBlock /> is using uppercase HTML. Always use lowercase HTML tags in React. 

私はこれを理解し、総額は私はマップとタイプを使用していない場合は、子のTextBlockに動作しているようですメインクラスのレンダリングで直接出力することができます。

メインクラス：

import React from 'react'; 
import TextBlock from './Components/TextBlock'; 

class RenderView extends React.Component { 
    constructor() { 
    super(); 

    this.state = { 
     blurbs: [ 
     { 
      value: "Text value", 
      tag: "h2", 
      component: 'TextBlock' 
     }, 
     { 
      value: "lorem stuff adnfsaldkfn asdfl lkjasdflkj asdlfk alskdjflaksdjf ", 
      tag: "p", 
      component: 'TextBlock' 
     } 
     ] 
    } 
    } 

    render() { 

    const componentArray = this.state.blurbs.map((blurb, index) => { 
     const Tag = blurb.component; 
     return <Tag obj={blurb} key={index} />; 
    }) 

    return componentArray; 
    } 
} 

子コンポーネントのTextBlock：

import React from 'react'; 

export default function TextBox(props) { 

    const Tag = props.obj.tag; 

    const Output = <Tag>{props.obj.value}</Tag> 

    return Output; 
} 

が反応クロムツールをチェック、それはhtml要素としてレンダリングされるように表示されます。これらの2つの宣言がjsx要素であることを認識するための反応を得るにはどうすればよいですか？

Answer 1

動的である必要があるかどうかはわかりません（文字列でなければならない場合や、常に反応コンポーネントの参照になる場合があります）が、コンポーネント参照を直接文字列：あなたが本当に文字列でそれを行う必要がある場合

this.state = { 
    blurbs: [ 
    { 
     value: "Text value", 
     tag: "h2", 
     component: TextBlock 
    }, 

、そしてあなたがマップにコンポーネントを追加し、それらをそのようにレンダリングすることができます：

const COMPONENTS = { 
    TextBlock, 
    // etc.. 
}; 

-

const Tag = COMPONENTS[blurb.component];