如何渲染一個JSX元素（React組件）數組

Question

例如，我想呈現一個命名的react組件的數組，例如<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

您應該使用組件，而不是字符串item.type這樣

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

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

UPDATE：

如果你沒有事先組件的參考，然後用它你的字符串轉換爲組件映射對象這樣的參考

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> 
);