Рендеринг нескольких реактивных компонентов с .map

Question

Это может быть полный вопрос о нобе, но мне трудно понять это. У меня есть компонент React и внутри его метода render, я хочу визуализировать некоторые динамически передаваемые в компонентах (через реквизиты).

Вот мое возвращение из метода визуализации (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, а затем зарегистрировался на консоли и показал массив компонентов. Однако {facetComponents} в методе визуализации имел те же результаты.

EDIT, для тех, кто заинтересован в решении

Потому что я действительно не мог найти ответ везде, вот мое решение завершено, благодаря @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> 
) 

Answer 1

Из того, что я могу собрать, это звучит как ваш 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}) /> 

Answer 2

досадная один.

Если вам нужны динамические имена компонентов, вам нужно будет использовать React.createElement(CompName), где CompName - это строка или объект класса.

По умолчанию реакция будет искать компонент с именем 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> 
)