ダイナミックコンポーネント名には、+のWebPACK + ES6

Question

に反応私は2つのこのような要素に反応定義しました。 WebpackとBabelを使ってES5にトランスコンパイルします。どのように誰もが知ってい

render() { 
    var Cmp = Math.random() > 0.5 ? CmpA : CmpB; 
    return _react2.default.createElement('Cmp', {}); 
} 

：私は何をしたい変数でコンポーネント定義を保存し、それをレンダリングすることです：

render() { 
    let Cmp = Math.random() > 0.5 ? CmpA : CmpB; 
    return <Cmp />; 
} 

しかし、上記のコードはに変換するので、それは動作しません。この問題を克服する？

[UPDATE]

は、私はこのようなCmpを使用する必要があることも考慮してください：

render() { 
    let Cmp = Math.random() > 0.5 ? CmpA : CmpB; 
    return <div><Cmp /></div>; 
} 

、または他の言葉で、私は動的コンポーネントに名前を付けることができるようにする必要があります！

ここに私のプロジェクトのpackage.jsonファイルの内容だ[UPDATE]：私はあなたがそれをこのように行うことができます信じてい

{ 
    "name": "expandable-react-redux", 
    "version": "1.0.0", 
    "description": "", 
    "main": "index.js", 
    "scripts": { 
    "test": "echo \"Error: no test specified\" && exit 1" 
    }, 
    "keywords": [], 
    "author": "Mehran", 
    "license": "ISC", 
    "dependencies": { 
    "babel-plugin-transform-decorators-legacy": "^1.3.4", 
    "babel-preset-es2015": "^6.6.0", 
    "babel-preset-react": "^6.5.0", 
    "react": "^15.0.1", 
    "react-dom": "^15.0.1", 
    "react-redux": "^4.4.2", 
    "redux": "^3.4.0" 
    }, 
    "devDependencies": { 
    "babel-core": "^6.7.6", 
    "babel-loader": "^6.2.4", 
    "react-hot-loader": "^1.3.0", 
    "webpack": "^1.12.14" 
    } 
} 

Answer 1

：

render() { 
    const props = { prop1: 10 }; 
    let Cmp = Math.random() > 0.5 ? <CmpA {...props} /> : <CmpB {...props} />; 
    return <div>{Cmp}</div>; 
}