javascript - 如何在变量中存储非自封闭标签并在 render() 方法中调用它？

Question

我有以下内容:

<Col xs={6} md={2}>
    <Card someProp={myProp} />
</Col>

<Col></Col>是一个网格组件。我想根据变量的值对其进行不同的设置。如果它是一个自封闭标签，我只需将其存储在像这样的变量中，并在渲染方法中调用它:

let someVar = <Col xs={6} md={2} />

if(someCondition) {
    someVar = <Col xs={12} md={6} />
}

{someVar} // Called like so...

但这不是一个自封闭标签，这样做会导致错误:

let someVar = <Col xs={6} md={2}>

if(someCondition) {
    someVar = <Col xs={12} md={6}>
}

{someVar}
    <Card someProp={myProp} />
</Col>

如何解决这个问题？

Answer 1

您可以构建一个组件，传递children并将其传播到实际的子组件(警告:someVar应该大写):

let SomeVar = ({children}) => <Col xs={6} md={2}>{children}</Col>

if(someCondition) {
    SomeVar = ({children}) => <Col xs={12} md={6}>{children}</Col>
}

<SomeVar>
    <Card someProp={myProp} />
</SomeVar>

或者:

let SomeVar = ({children}) => {
    if(someCondition) {
        return <Col xs={6} md={2}>{children}</Col>
    }
    else {
        return <Col xs={12} md={6}>{children}</Col>
    }
}

<SomeVar>
    <Card someProp={myProp} />
</SomeVar>