使用.map渲染多個React組件

-1

這可能是一個完整的noob問題，但我無法解決這個問題。我有一個React組件，並且在其渲染方法中，我想渲染一些動態傳入的組件（通過道具）。使用.map渲染多個React組件

這是我從渲染方法（ES6，與巴貝爾transpiled）

return (
    <div className={openState}> 
    /* Shortened for brevity*/ 
    {this.props.facets.map(function(f) { 
     var CompName = facetMap[f.type] 
     return <CompName key={f.id} /> 
    })} 
    /* Shortened for brevity*/ 
    </div> 
)

facetMap是一個簡單的映射爲一個字符串匹配與傳入的「類型」的回報。我似乎無法得到要在頁面上實際呈現的組件。

我將.map（）方法的結果存儲在var中，然後將其記錄到控制檯，並顯示了一個組件數組。但render方法中的{facetComponents}具有相同的結果。

編輯，爲有志於解決

因爲我真的找不到任何地方的答案，這是我的完整的解決方案，這要歸功於@Mathletics

//Components imported using ES6 modules 
import OCFacetText from "./oc-facet-text" 
// Etc... 

//Later on, in my render method: 
let facetMap = { 
    "text":   OCFacetText, 
    "number":  OCFacetNumber, 
    "numberrange": OCFacetNumberRange, 
    "boolean":  OCFacetBoolean, 
    "checkbox":  OCFacetCheckbox, 
    // Etc, etc... 
} 

let facetComps = facets.map(function(f) { 
    var CompName = facetMap[f.type] 
    return <CompName key={f.id} /> 
}) 

//Finally, to render the components: 
return (
    <div className={openState}> 
    /* Shortened for brevity*/ 
     {facetComps} 
    /* Shortened for brevity*/ 
    </div> 
)

來源

2016-03-02 Aaron Wagner

如果你只呈現一個組件工作的呢？ – Mathletics

只需在頁面上呈現組件？是的，這是有效的。基本上用例是允許這些組件被重用和動態指定。 –

「facetMap」是一組字符串還是一組Component類？ [動態組件名稱]（http://stackoverflow.com/questions/29875869）在SO上已被很好地覆蓋。 – Mathletics

據我所知，這聽起來像你facetMap是字符串的集合：

var facetMap = {text: 'OCFacetText'}

，但它實際上應該返回組件類別：

var OCFacetText = React.createClass({...}); 

var facetMap = {text: OCFacetText};

然後（並且只有這樣）您將需要使用createElement方法來構建動態的組件：

var CompName = facetMap[f.type]; // must be a FUNCTION not a string 
return React.createElement(CompName, {key: f.id}) />

來源

2016-03-03 15:23:42 Mathletics

僅供參考，這正是是解所涵蓋的問題，我聯繫你，http://stackoverflow.com/questions/29875869/react-jsx-dynamic-component-name – Mathletics

我居然看到了這個問題的答案，但它不是爲這種背景下超級有用的，但我可以看到兩者如何重疊。 –

兩個重疊的，因爲他們是_The same_。這完全是同一個問題。 – Mathletics

煩人的一個。

如果您需要動態組件名稱，則必須使用React.createElement(CompName)，其中CompName是一個字符串或類對象。

默認情況下，react會在您的示例中查找名爲CompName的組件。

所以，你的渲染功能看起來像這樣：

return (
    <div className={openState}> 
    /* Shortened for brevity*/ 
    {this.props.facets.map(function(f) { 
     var CompName = facetMap[f.type] 
     return React.createElement(CompName, {key: f.id}) /> 
    })} 
    /* Shortened for brevity*/ 
    </div> 
)

來源

2016-03-02 19:56:27 rguerrettaz

不起作用。已經嘗試過了。 'React.createElement（CompName，{key：f。ID}）'是功能上相同'' –

是'CompName'一個字符串？我的解決方案假定它是。 – rguerrettaz

是的，它是一個字符串。 –

使用.map渲染多個React組件

回答

相關問題