動態組件名稱陣營+的WebPack + ES6

我已經定義了兩個反應的組分是這樣的：動態組件名稱陣營+的WebPack + ES6

class CmpA extends React.Component 
{ ... } 

class CmpB extends React.Component 
{ ... }

正如你可以看到他們在ES6語法定義。我使用Webpack和Babel將它們轉換爲ES5。我想要做的是一個組件定義存儲在一個變量，然後使其：

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

但由於上面的代碼轉換爲它不工作：

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

有誰知道如何克服這個問題？

[更新]

也請考慮，我將需要使用Cmp這樣的：

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

或者換句話說，我需要能夠動態地命名的組件！

[更新]

這裏是我的項目的package.json文件的內容：

{ 
    "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" 
    } 
}

來源

2016-04-29 Mehran

我沒有得到'當我嘗試它時'Cmp''。你確定？ http://babeljs.io/repl/#?evaluate=true&presets=es2015%2Creact&code=class%20Foo%20%7B%0A%20%20render()%20%7B%0A%20%20%20%20let% 20Cmp％20％3D％20Math.random（）％20％3E％200.5％20％3F％20CmpA％20％3A％20CmpB％3B％0A％20％20％20％20return％20％3CCmp％20％2F％ 3E％3B％0A％20％20％7D％0A％7D – loganfsmyth

代碼粘貼在這裏，所以是的，我很確定。也許是因爲我在'package.json'中使用的依賴關係！我會在我的問題中包括這一點。 – Mehran

捆綁過程肯定有問題。看看你的'.babelrc'和'webpack.config.js'可能會有幫助。 –

我相信你能做到這一點是這樣的：

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

來源

2016-04-29 21:54:23

你的回答是正確的，但不是我正在尋找的東西！我已更新我的問題以更好地反映我的問題。 – Mehran

已更新答案以符合您的問題。 –

謝謝，但我可以以某種方式設置'{Cmp}'的屬性嗎？像'{Cmp prop1 =「10」}'？ – Mehran

動態組件名稱陣營+的WebPack + ES6

回答

相關問題