使用 .map 渲染多个 React 组件

Rendering Multiple React Components with .map

本文关键字：React 组件 map 使用      更新时间：2023-09-26
这可能是

一个完整的菜鸟问题，但我很难弄清楚这一点。 我有一个 React 组件，在其渲染方法中，我想渲染一些动态传入的组件（通过 props）。

这是我从渲染方法（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}) />

烦人的一个。

如果你想要动态组件名称，你必须使用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>
)
相关文章：