如何渲染数组中的组件

Question

我有几个组件。

formFields/index.js

export {default as description} from './description/description.component' 
export {default as title} from './title/title.component' 

我导入和mainComponent

import * as FormFields from '../formFields' 

如何使用它们渲染功能得到FormFields的名单？

这是我失败的尝试之一：

import * as FormFields from '../formFields' 

render() { 

    let properties = ['description', 'title']; 

    let getComponent = (type) => { 
    let formElement = FormFields[type] 
    return <formElement/> 
    } 

    return (
    <div> 
     {properties.map((property, i) => { 
     return (
      <div key={i}> 
      {getComponent(property)} 
      </div> 
     ); 
     })} 
    </div> 
) 
} 

这个实验是成功的：

render() { 
    let EditComponent = FormFields['description'] 
    return (
    <div> 
     <EditComponent/> 
    </div> 
) 
} 

Answer 1

这里有一个简单的例子，也通过同样的道具。它基本上是您映射的组件阵列，然后进行简单渲染。

class Description extends React.Component { 
 
    render() { 
 
    return <div>{this.props.prop}</div>; 
 
    } 
 
} 
 

 
class Title extends React.Component { 
 
    render() { 
 
    return <div>{this.props.prop}</div>; 
 
    } 
 
} 
 

 
const myComponents = [ 
 
    Description, 
 
    Title, 
 
]; 
 

 
class App extends React.Component { 
 
    render() { 
 
    return (
 
     <div> 
 
     {myComponents.map((FormField, i) => <FormField key={i} prop="Hello World!" />)} 
 
     </div> 
 
    ); 
 
    } 
 
} 
 

 

 
ReactDOM.render(<App/>, document.getElementById('View'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="View"></div>