プレゼンテーションコンポーネントにクラスベースのコンポーネントをプロパティとして渡し、プレゼンテーションコンポーネントでレンダリングできますか？

Question

クラスベースのコンポーネントをレンダリングするプレゼンテーションコンポーネントがありますが、プレゼンテーションコンポーネントにインポートする必要はありません。プロパティとして渡したいと思います。それは可能ですか？これを行うより良い方法はありますか？ここで

が、私はそのコンテナ内のプレゼンテーションコンポーネントをレンダリングしていますどのように、それは名前ですTodaysRevenueThumbnailです：

renderTodaysRevenueThumbnail() { 

     if (!this.props.todaysTotalRevenue || !this.props.todaysSales) { 
      return <h1>Loading...</h1>; 
     } else { 
      return (
       <TodaysRevenueThumbnail 
        totalRevenue={this.props.todaysTotalRevenue} 
        sales={this.props.todaysSales} 
        name={"Today's"} 
        ChartComponent={<TodaysRevenueChart/>} 
       /> 
      ); 
     } 
    } 

あなたが、私はそれをTodaysRevenueChartと呼ばれる別のコンポーネントのインスタンスを渡すしようとしています見ることができます。ここで

は、私がTodaysRevenueThumbnailの内側TodaysRevenueChartをレンダリングしようとする方法である：

import React, {Component} from 'react'; 

const TodaysRevenueThumbnail = ({totalRevenue, sales, name, ChartComponent}) => { 

    return (
    <div className="revenueThumbnail"> 
     <div className="col-lg-12 col-md-12" > 
     <div className="thumbnail"> 
      <ChartComponent todaysSales={sales} /> 
      <div className="caption"> 
      <h3>{name} Total Revenue: ${totalRevenue}</h3> 
      </div> 
     </div> 
     </div> 
    </div> 
); 
}; 

export default TodaysRevenueThumbnail; 

私が言うコンソールでエラーが出る：

「invariant.js：38Uncaught（約束で）エラー：要素をタイプが無効です：文字列（組み込みコンポーネントの場合）またはクラス/関数（コンポジットコンポーネントの場合）がありますが、オブジェクトが取得されましたがオブジェクト：renderメソッドのチェックTodaysRevenueThumbnail

Answer 1

レンダリングされたインスタンスは、コンポーネントのコンストラクタを渡す：

<TodaysRevenueThumbnail 
    totalRevenue={this.props.todaysTotalRevenue} 
    sales={this.props.todaysSales} 
    name={"Today's"} 
    ChartComponent={TodaysRevenueChart} 
/> 

Answer 2

はChartComponent={TodaysRevenueChart}としてそれをパスし、それが動作するはずです。

<TodaysRevenueChart foo="bar" /> 

のようなJSXは、大きく形だ

{ type: TodaysRevenueChart, props: { foo: 'bar' } } 

に変身することを理解し、それをして何をすべきか知っていること、レンダリングから返されることを期待し反応します。ある意味では、jsxは、をのように見せる便利な方法です。実際には、反応の責任を果たしているときにコンポーネントを実行しているようです。