動態呈現組件在反應V15

Question

我有react components陣列，我試圖將它們輸出：

this.props.data

  [ 
       { 
        key: 1, 
        element: 'input', 
        type: 'text', 
        placeholder: 'Jamie is Sex' 
       }, 
       { 
        key: 2, 
        element: 'input', 
        type: 'text', 
        placeholder: 'Jamie is Not Sex' 
       } 
      ] 

input.component.js

import React from 'react'; 

const input = React.createClass({ 
    render() { 
    return (
     <input type="text" /> 
    ); 
    } 
}); 

export default input; 

import components.js

動態代碼

import components from '../../componets'; 
render() { 
    return (
     <form action=""> 
      {this.props.data.map((item, index) => <{components[item.element]} key={index} data={item}/>)} 
     </form> 
     //{components[item.element]} which would reference 'input' from components.js 
    ); 
} 

輸出

bundle.js:33283 Uncaught Error: Cannot find module "../components/Form/Form.component.js"webpackMissingModule @ bundle.js:33283(anonymous function) @ bundle.js:33283__webpack_require__ @ bundle.js:20(anonymous function) @ bundle.js:32763__webpack_require__ @ bundle.js:20(anonymous function) @ bundle.js:7464__webpack_require__ @ bundle.js:20(anonymous function) @ bundle.js:48__webpack_require__ @ bundle.js:20(anonymous function) @ bundle.js:40(anonymous function) @ bundle.js:43 
bundle.js:99 [WDS] Errors while compiling. 

Answer 1

實際上你需要通過React.createElement()創建元素，JSX被transpiled這個語法，但動態元素不會被轉換。

我還建議您將映射移出返回值，將其映射到變量上，您也可以檢查數據的有效性。東西有點這樣

render() { 
    let elems = null; 
    let {data} = this.props; 
    if(data.length > 0){ 
     elems = data.map((item, index) => { 
      if(components[item.element]){ 
       return React.createElement(components[item.element], { key: index, data: item }) 
      else { 
       return null 
      } 
     }); 
    } 
    return (
     <form action=""> 
      {elems} 
     </form> 
    ); 
}