Reactコンポーネントタグを動的に変更する

Question

プロジェクトのランディングページを作成していて、4つの異なる用紙コンポーネントを表示するヘルパー機能を使用してコードを縮小したいとします。論文内にあるアイコンコンポーネントを表示する以外はすべて正常に動作しているようです。

"Warning: The tag <CardTravelIcon> is unrecognized in this browser. If you 
meant to render a React component, start its name with an uppercase letter." 

と

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

：私はそれが正しいテキストで、まだコンポーネントがページに表示されていないと私は、各コンポーネントタグのためにこれらの2回の警告を受けアイコンをログコンソール

MapTravelIconや他の3つのコンポーネント名のうち、マップ関数からIconを使用する代わりに、その正確な形式でハードコードすると、すべて正常に動作します。以下は私のヘルパー関数のコードです：

class Landing extends Component { 
    renderPapers() { 
    const classes = this.props.classes; 
    return _.map(infoPapers, ({ description, Icon }) => { 
     return (
     <Grid item xs={6} sm={3} key={Icon}> 
      <Paper className={classes.paper}> 
      <Icon className={classes.paperIcons} /> 
      {description} 
      </Paper> 
     </Grid> 
    ); 
    }); 
    } 

私は迷っていますし、助けていただければ幸いです。ありがとうございました。

Answer 1

コンポーネントを変数として渡したいですか？

のは、あなたがこの最小限CardTravelIconコンポーネントがあるとしましょう：あなたは私たちinfoPapersを示さなかった

const infoPapers = [ 
{ 
    description: "Paper 1 description", 
    Icon : CardTravelIcon 
}]; 

：このような

const CardTravelIcon = (props) => (
    <div className={ props.className }>Card Travel Icon</div> 
); 

そしてinfoPapersデータを（Iconがコンポーネントへの参照です）データ、しかし、私はあなたがコンポーネントとして文字列を渡そうとしていると思われる{ Icon : "<CardTravelIcon />" }とinnerHTML（文字列からHTMLをレンダリング）を設定するように動作することを期待します。これはReactでは当てはまりませんが、まずJSXコードをReact.CreateElementへの呼び出しに変換する必要があり、文字列を解析することでJSXコードを実行する必要はありません。

あなたはコンポーネントすべてが以下の方法（注：ネイティブマップ方式の賛成で削除lodash、明確にするために）：レンダリングとうまくレンダリングされるべきへの参照を渡した場合https://jsfiddle.net/svygw338/：

class Landing extends React.Component { 
    render() { 
    return infoPapers.map(({ description, Icon }, idx) => { 
     return (
     <div key={ idx }> 
      <Icon /> 
      {description} 
      </div> 
    ); 
    }); 
    } 
}; 

はここで働い例ですが