Question

情况

我试图基于jsx模板渲染组件。原因是因为我的应用程序中有几种情况，但是有一些微妙的自定义，所以我宁愿将自定义的业务逻辑留在相应组件中，而不是工厂中。

示例

父模板

<div></div>

子模板

<p></p>

在渲染功能中，我想向父级添加n个子级组件。因此，如果n = 4，那么我期望输出类似

<div>
    <p></p>
    <p></p>
    <p></p>
    <p></p>
</div>

我尝试使用parentTemplate.children.push无济于事，因为此时组模板仍是JSX且尚未呈现组件。如何使用jsx + react完成此任务？

额外

这是我到目前为止的实际代码

render() {

    let groupTemplate = <ListGroup></ListGroup>

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

    let itemsJsx;
    this.props.navArray.forEach((item) => {
        groupTemplate.children.push(itemTemplate(item))
    });

    return (
        [groupTemplate]  
    );
}

来自父母：

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

Answer 1

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

父母：

<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>))
}

这将使您可以在调用函数上定义容器，并使您能够根据需要创建儿童。

希望这会有所帮助。

Answer 2

不清楚您的问题，但我已尝试根据您的代码找出您要执行的操作，看看是否有帮助，否则我将删除答案。

以下代码工作的机制是，它接收groupTemplate，在您的情况下，您将作为道具传入，然后将其内的子代返回并一起返回。如果没有通过任何相关的道具，并且存在渲染器中的映射器功能，则可以使用默认的子组模板，该映射器函数确定要使用的模板，并根据n的长度来渲染navArray次。 / p>

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);
}

Answer 3

通过标准JSX嵌套将内容作为常规子级传递到ListGroup：

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>
    );
}

动态反应将子代添加到jsx / component

3 个答案: