Question

仅当某些条件为真时，我才尝试渲染某些组件。

完成我正在render（）内部使用的

 return (
  <div className={classes.root}>

    {registrationScreen && (
      **** This is where I want to put the components ****
    )}

  </div>)

我要放入的组件中也包含{}：

        <Tabs
         value={value}
         onChange={this.handleChange}
         classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
       >
         {tabs.map(tab => (
           <Tab
           disableRipple
           classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
           label={tab}
           className={classes.fontTab}
         />
         ))}
       </Tabs>
         {value === 0 && 
         <TabContainer>
           <Form razaoSocial={razaoSocial} handleRazaoSocial={handleRazaoSocial}></Form>
         </TabContainer>}
         {value === 1 && 
         <TabContainer>
           Teste
         </TabContainer>}
         {value === 2 && 
         <TabContainer>
           TESTE3
         </TabContainer>}

但是，当我尝试将它们放置在if返回的内部时：解析错误：意外的令牌，预期为“，”

有人可以帮助我吗？

Answer 1

使用根元素包装要放入条件中的组件。 React期望所有组件都具有根元素/父节点。如果您不想渲染额外的元素，可以使用<Fragment/>组件作为根。您可以像这样import { Fragment } from 'react';从“反应”中导入片段，然后将其用于要放置在条件块中的组件

<Fragment>
    <Tabs
     value={value}
     onChange={this.handleChange}
     classes={{ root: classes.tabsRoot, indicator: classes.tabsIndicator }}
   >
     {tabs.map(tab => (
       <Tab
       disableRipple
       classes={{ root: classes.tabRoot, selected: classes.tabSelected }}
       label={tab}
       className={classes.fontTab}
     />
     ))}
   </Tabs>
     {value === 0 && 
     <TabContainer>
       <Form razaoSocial={razaoSocial} handleRazaoSocial={handleRazaoSocial}></Form>
     </TabContainer>}
     {value === 1 && 
     <TabContainer>
       Teste
     </TabContainer>}
     {value === 2 && 
     <TabContainer>
       TESTE3
     </TabContainer>}
</Fragment>

如何使用JSX返回一组dom元素？

1 个答案: