这可能是一个完全菜鸟的问题,但我很难弄清楚这一点。我有一个 React 组件,在它的 render 方法中,我想渲染一些动态传入的组件(通过 props)。
这是我从 render 方法返回的结果(ES6,用 Babel 转译)
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}
具有相同的结果。
编辑,对于那些对解决方案感兴趣的人
因为我真的无法在任何地方找到答案,这是我完整的解决方案,感谢@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>
)
最佳答案
据我所知,听起来您的 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}) />
关于javascript - 使用 .map 渲染多个 React 组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35755998/