Reactjs react动态地向jsx/component添加子级

形势

我正在尝试基于模板jsx片段呈现组件。原因是，我的应用程序中有一些这样的情况，但有一些微妙的定制，我宁愿将定制的业务逻辑留在相应的组件中，而不是工厂中

示例

父模板

<div></div>

来自家长：

const groupTemplate = <ListGroup className='custom-container-classes'></ListGroup>
const itemTemplate = <ListGroup.Item className='customized-classes'></ListGroup.Item>
<NavigationFactory groupTemplate={groupTemplate} itemTemplate={itemTemplate}>
</NavigationFactory>

constgrouptemplate=
常量项模板=

您可以使用渲染道具，这是实现类似效果的最佳方法：

家长：

<NavigationFactory 
     itemTemplate={itemTemplate}
     render={children => <ListGroup className='custom-container-classes'>
          {children}
     </ListGroup>}
 />

{儿童}
}
/>

孩子：

render() {
     this.props.render(this.props.navArray.map(item => <ListGroup.Item key={item.id}>
       {item.name}
  </ListGroup.Item>))
}

render（）{
this.props.render（this.props.navArray.map）（项=>
{item.name}
))
}

这将允许您在调用函数上定义容器，并允许您根据需要创建chidlren

---

希望这有帮助。

您的问题不清楚，但我试图根据您的代码了解您正在尝试做什么，看看是否有帮助，否则我将删除我的答案

下面代码工作的机制是，它接受groupTemplate，在您的情况下，您将作为一个道具传入它，然后在其中接受子项并返回它们组合在一起。有一个默认的子组模板，如果没有传递相关的道具，您可以使用该模板，并且渲染中有一个映射器函数，该函数确定要使用哪个模板，并根据

navArray

长度渲染

n

次数

componentDidMount() {
    // setup default templates

    if (!this.props.navButtonContainerTemplate) {
        this.prop.navButtonContainerTemplate = (items) => {
            return <ListGroup>{items}</ListGroup>
        }
    }

    if (!this.props.navButtonTemplate) {
        this.props.navButtonTemplate = (item) => {
            return (
                <ListGroup.Item>
                    {item.name}
                </ListGroup.Item>
            )
        }
    }
}

render() {

    const itemsJsx = this.props.navArray.map(obj => {
        const itemJsx = this.props.navButtonTemplate(obj)
        return itemJsx;
    });

    return this.props.navButtonContainerTemplate(itemsJsx);
}

componentDidMount（）{
//设置默认模板
如果（！this.props.navButtonContainerTemplate）{
this.prop.navButtonContainerTemplate=（项目）=>{
返回{items}
}
}
如果（！this.props.navButtonTemplate）{
this.props.navButtonTemplate=（项目）=>{
返回(
{item.name}
)
}
}
}
render（）{
const itemsJsx=this.props.navArray.map（obj=>{
const itemJsx=this.props.navButtonTemplate（obj）
返回itemJsx；
});
返回此.props.navButtonContainerTemplate（itemsJsx）；
}

通过标准JSX嵌套将内容作为常规子项传递给

列表组

：

render() {
    let itemTemplate = (item) => {
        return <ListGroup.Item>{item.name}</ListGroup.Item>;
    }
    if (this.props.itemTemplate) itemTemplate = this.props.itemTemplate;

    return (
        <ListGroup>
            {this.props.navArray.map(item => (
                itemTemplate(item)
            ))}
        </ListGroup>
    );
}

render（）{
让项目模板=（项目）=>{
返回{item.name}；
}
如果（this.props.itemTemplate）itemTemplate=this.props.itemTemplate；
返回(
{this.props.navArray.map（项=>(
项目模板（项目）
))}
);
}

My

ListGroup

是JSX。它需要保持这种方式，因为jsx最终将作为一个道具传递进来——这就是为什么我被困在这个问题上的核心。是否可以预渲染jsx，然后通过映射/循环添加子级？但是映射将创建如下jsx数组：[……，…，…]。你到底需要什么。这是正确的，只是当你需要的时候别忘了添加一个键mapping@Domino987在您的示例中，

ListGroup

在渲染函数中是静态的。不幸的是，我没有这种特权，因为groupTemplate将作为JSX从父级通过道具传递进来。因此，我必须找出某种方法，将映射的jsx注入groupTemplate的jsx中。我可以用字符串操作，但我相信react有一种“更正确”的方法。你是说groupTemplate实际上是一个道具，你必须在它后面附加子元素？对的你能告诉我们，你如何称呼这个组件吗？在你的问题中，你有一个

示例父模板子模板

似乎缺少了你想要添加到问题中的部分？@Rikin很好。它在那里，但它被隐藏了，因为在示例代码之前需要有一个空行。@Rikin您的答案是最接近于工作解决方案的。我正在修补它，看看是否能让它工作。@Rikin我根据你的代码让它工作。如果你把答案放回原处，我会对它做一些小的修改。答案放回黑板上。不幸的是，这个返回中仍然有静态代码，因此它无法工作，因为我需要它。

render() {
     this.props.render(this.props.navArray.map(item => <ListGroup.Item key={item.id}>
       {item.name}
  </ListGroup.Item>))
}

componentDidMount() {
    // setup default templates

    if (!this.props.navButtonContainerTemplate) {
        this.prop.navButtonContainerTemplate = (items) => {
            return <ListGroup>{items}</ListGroup>
        }
    }

    if (!this.props.navButtonTemplate) {
        this.props.navButtonTemplate = (item) => {
            return (
                <ListGroup.Item>
                    {item.name}
                </ListGroup.Item>
            )
        }
    }
}

render() {

    const itemsJsx = this.props.navArray.map(obj => {
        const itemJsx = this.props.navButtonTemplate(obj)
        return itemJsx;
    });

    return this.props.navButtonContainerTemplate(itemsJsx);
}

render() {
    let itemTemplate = (item) => {
        return <ListGroup.Item>{item.name}</ListGroup.Item>;
    }
    if (this.props.itemTemplate) itemTemplate = this.props.itemTemplate;

    return (
        <ListGroup>
            {this.props.navArray.map(item => (
                itemTemplate(item)
            ))}
        </ListGroup>
    );
}