動的に私のような配列を持っている

Question

文字列の配列からコンポーネントを呼び出すリアクト

export class MyView extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = {}; 
    } 
    render(){ 
     return(
      <div> 
       {options.map(obj => <obj.name/>) 
      </div> 
     ) 
    } 
} 

：

export const ComponentOne = props => (<div>{this.props.content}</div>) 
export const ComponentTwo = props => (<div>{this.props.content}</div>) 

は、その後、私は私の見解を持っています

私はこれらのコンポーネントを動的にレンダリングしたいのですが、どのようにするのか分かりません。

Answer 1

コンポーネントクラスの名前を保持するのではなく、クラス自体を保持してください。同様に：

const options = [ 
    {id: 1, componentClass: ComponentOne}, 
    {id: 2, componentClass: ComponentTwo} 
]; 

export class MyView extends React.Component{ 
    constructor(props){ 
     super(props); 
     this.state = {}; 
    } 
    render(){ 
     return(
      <div> 
       { 
        options.map(obj => { 
        const Class = obj.componentClass; 

        return <Class />; 
        }) 
       } 
      </div> 
     ) 
    } 
}