JSX 요소의 배열을 렌더링하는 방법 (React 구성 요소)

Question

예를 들어, <Foo />, <Bar /> 및 <Baz />과 같이 명명 된 반응 구성 요소의 배열을 렌더링하려고합니다.

const rendered = []; 
const getItems = this.props.itemslist.map((item, key) => { 
const TYPE = item.type; 
rendered.push(<TYPE data-attributes={attributes} key={key} />); 
}); 
return (
    <Grid> 
    <Row> 
    {rendered} 
    </Row> 
    </Grid> 
); 

내 배열을 반복 할 수 있으며 콘솔에서 요소의 배열을 볼 수 있지만, 그들은 빈 HTML 요소 "<foo></foo><bar></bar><baz></baz>", 그리고 실제 구성 요소로 렌더링됩니다. 왜 이런 일이 일어나고, 무엇보다 중요한 것은 어떻게 구성 요소를 렌더링 할 수 있습니까?

Answer 1

이

import Foo from './Foo'; 
import Bar from './Bar'; 

[ { type: Foo, }, { type: Bar, }, { type: Baz}] 

UPDATE처럼 item.type에서 구성 요소 대신 문자열을 사용한다 : 당신이 사전에 구성 요소를 참조 할 수없는 경우

다음 구성 요소로 문자열을 변환 매핑 객체를 사용 이와 같은 참조

import Foo from './Foo'; 
import Bar from './Bar'; 

const mapper = { 
    Foo: Foo, 
    Bar: Bar, 
} 

// Then use it like this 

const getItems = this.props.itemslist.map((item, key) => { 
    const Type = mapper[item.type]; 
    rendered.push(<Type data-attributes={attributes} key={key} />); 
}); 

Answer 2

첫 번째 실수는 잘못된 e가 .map이다. .map은 각 배열 요소를 탐색하고 변경합니다. 지금은 .forEach 인 것처럼 사용하고 있습니다.

코드는 더 다음과 같아야합니다

이

const getItems = this.props.itemslist.map((item, key) => { 
    const TYPE = item.type; 
    return <TYPE data-attributes={attributes} key={key} /> 
}); 

Answer 3

동적 이름으로 반작용 요소를 만들기위한 React.createElement를 사용할 수 있습니다. 또한 해당 구성 요소를 가져와야합니다.

const rendered = []; 
const getItems = this.props.itemslist.map((item, key) => { 
    const component = React.createElement(item.type, {data-attributes: attributes, key: key}, null); 
    rendered.push(component); 
}); 
return (
    <Grid> 
    <Row> 
    {rendered} 
    </Row> 
    </Grid> 
);