は、名前を変更する構造化代入反応

Question

は、ここで作成されていないアプリ/モジュールからの目標

だcreate-react-app

class Hoc extends React.Component { 
    render() { 
    const {component: Component} = this.props 
    return (
     <div> 
     <Component /> 
     </div> 
    ) 
    } 
} 

説明：名前の変更と

利用の基本的なES6の構造化代入するように反応要素は{component}の代わりに<Component />と参照することができます。

create-react-appから作成したアプリでこれを使用しています。この構文はfullstack react本に記載されています。この問題は、私が作業している2つの反応モジュールライブラリに存在し、それはcreate-react-appから作成されていません。

おそらく、バベルプラグインがありません。私がすべての依存関係とプラグインを見ることができるように、これが動作するアプリケーションが取り出されましたが、私はこれに対応するアプリケーションを特定できませんでした。

Hmmm恐らくcreate-react-appという反応スクリプトの1つで処理されます。

.babelrc

{ 
    "presets": ["es2015", "stage-2", "react"], 
    "plugins": [ 
    "add-module-exports" 
    ] 
} 

編集：

これは解決すべき問題を発揮するために最低限必要な要件の一例です。 this.props.childrenと{React.cloneElement(this.props.component, {...this.props})}のようなサイドステップソリューションは、特定の問題の解決策ではありません。乾杯！

Answer 1

コンポーネント（Hocというコンポーネントを呼び出したことを考慮して）上位コンポーネントを作成しようとしている場合は、https://reactjs.org/docs/higher-order-components.htmlのドキュメントに従ってください。