Question

我试图在某些状态属性更改时有条件地渲染组件，并且面对一些数组时说：“相邻的JSX元素必须包装在一个封闭的标记中。您是否要JSX片段<> ...？”。虽然我一直在寻找它，是因为以不正确的方式返回了多个同级JSX元素。我在代码中看不到任何此类信息。有人可以帮我弄清楚我在尝试渲染另一个组件时做错了什么。

const Data = [
    new Feature({ ID: 101, NAME: 'ABC1' }), 
    new Feature({ ID: 102, NAME: 'XYZ2' )),
    new Feature({ ID: 103, NAME: 'PQS3'})
];
class Editor extends React.Component{
    constructor(props, context){
        super(props, context);
        this.state = {
            selectedF: null,
            fmu: null,
            mode: props.mode || C.MODE_VIEW,
            overview: false
        } 
    }

    handleClick = (event) => {
        const fid = event.target.value
        this.setState({ selectedF: fid });
    }

    display = () => {
        for(let i=0; i<Data.length; i++){
            if(this.state.selectedF == Data[i].get('ID'))
                {
                const data = Data[i].getProperties();
                this.setState({
                    fmu: data,
                    overview: true
                });

                }       
        }
    }
     render(){
        return (
                <React.Fragment>
            <div className="sidebarContainer">
            {this.state.overview ? <Overview /> :
                <Tab.Container id="sidebar">
                <div className="bottomToolbar" style={{display: "flex"}}>
                  <div>
                  <ButtonToolbar>
                    <Button variant="primary">CREATE</Button>
                    <Button variant="primary" onClick={this.display}>VIEW</Button>
                </ButtonToolbar>
                 </div>
                 </div>
                  <ListGroup>
                  {Data.map((f, id) => {
                      return (<ListGroup.Item 
                              action href="" 
                              key={f.get('ID')}
                              value = {f.get('ID')}
                              onClick={this.handleClick}
                              >
                              {f.get('NAME')}
                              </ListGroup.Item>
                              )
                  })}
                  </ListGroup> 
                  <Tab.Content style={{ flex: "1 1 auto", position: "relative"}}>
                  <Tab.Pane eventKey="">

                  </Tab.Pane>
                </Tab.Content>
          </Tab.Container>  
}         
                </div> 

            </React.Fragment>
        )
    }


}

错误：

SyntaxError:Adjacent JSX elements must be wrapped in an enclosing tag. Did you want a JSX fragment <>...</>? (72:16)
  71 |          {this.state.overview ? <Overview /> :
> 72 |                 <Tab.Container id="sidebar">
     |                 ^
  73 |                 <div className="bottomToolbar" style={{display: "flex"}}>
  74 |                <div>
  75 |                <ButtonToolbar>

我试图在VIEW按钮单击时隐藏Editor组件的JSX，并根据名为“ overview”的状态属性的值来呈现Overview组件。

Answer 1

f.get('NAME')的结果可能返回多个片段。但是我们无法从示例中看到数组的类型。

Answer 2

</React.Fragment>}中有一个额外的'}'。

请删除该内容，一切正常。

编辑：您需要添加()包装器

{
  this.state.overview ? <Overview /> :
   (<Tab.Container>
      ...
    </Tab.container>)
}

React组件条件渲染

2 个答案: