Javascript 对添加幻灯片窗格有问题作出反应

我是*Reactjs**的初学者，我尝试在我的react项目中添加这个。添加的幻灯片窗格无法正常工作，任何人都知道如何为reactjs正确添加该窗格

谢谢

我的代码部分

AgentView.js

    import React, { Component } from 'react';
    import {
      Button,
      Card,
      CardBody,
      CardGroup,
      Col, Container,
      Form,
      Input,
      InputGroup,
      InputGroupAddon,
      InputGroupText,
      Row
    } from "reactstrap";

    import './AgentView.css';
    class AgentView extends Component {
      render() {
        return (
          <Container>
            <div id="mySidepanel" class="sidepanel">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>

          </Container>


        );  }

    }





    export default AgentView;

 import React from 'react';
    import ReactDOM from 'react-dom';
    import { MemoryRouter } from 'react-router-dom';
    import AgentView from './AgentView';

    it('renders without crashing', () => {
      const div = document.createElement('div');
      ReactDOM.render(<MemoryRouter><AgentView/></MemoryRouter>, div);
      ReactDOM.unmountComponentAtNode(div);




     function openNav() {
  document.getElementById("mySidepanel").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}
      })();
    });

import React，{Component}来自'React'；
进口{
按钮
卡片
名片夹，
CardGroup，
上校，集装箱，
形式，
输入，
输入组，
InputGroupAddon，
输入组文本，
一行
}从“反应带”；
导入“/AgentView.css”；
类AgentView扩展组件{
render（）{
返回(
☰ 切换侧面板
);  }
}
导出默认代理视图；

AgentView.test.js

    import React, { Component } from 'react';
    import {
      Button,
      Card,
      CardBody,
      CardGroup,
      Col, Container,
      Form,
      Input,
      InputGroup,
      InputGroupAddon,
      InputGroupText,
      Row
    } from "reactstrap";

    import './AgentView.css';
    class AgentView extends Component {
      render() {
        return (
          <Container>
            <div id="mySidepanel" class="sidepanel">
  <a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
  <a href="#">About</a>
  <a href="#">Services</a>
  <a href="#">Clients</a>
  <a href="#">Contact</a>
</div>

<button class="openbtn" onclick="openNav()">☰ Toggle Sidepanel</button>

          </Container>


        );  }

    }





    export default AgentView;

 import React from 'react';
    import ReactDOM from 'react-dom';
    import { MemoryRouter } from 'react-router-dom';
    import AgentView from './AgentView';

    it('renders without crashing', () => {
      const div = document.createElement('div');
      ReactDOM.render(<MemoryRouter><AgentView/></MemoryRouter>, div);
      ReactDOM.unmountComponentAtNode(div);




     function openNav() {
  document.getElementById("mySidepanel").style.width = "250px";
}

function closeNav() {
  document.getElementById("mySidepanel").style.width = "0";
}
      })();
    });

从“React”导入React；
从“react dom”导入react dom；
从'react router dom'导入{MemoryRouter}；
从“/AgentView”导入AgentView；
它（'渲染而不崩溃'，（）=>{
const div=document.createElement（'div'）；
ReactDOM.render（，div）；
ReactDOM.unmountComponentAtNode（div）；
函数openNav（）{
document.getElementById（“mySidepanel”）.style.width=“250px”；
}
函数closeNav（）{
document.getElementById（“mySidepanel”）.style.width=“0”；
}
})();
});

读取错误

“JSX表达式必须有一个父元素。”

用谷歌搜索这个错误会很快给你答案

React是用JSX构建的，其中一条规则是每个表达式必须包装在父表达式中。您的侧面板div和button是没有父级的同级。因此，将它们包装在div中修复了问题，组件将进行渲染

render（）{
返回(
☰ 切换侧面板
);
}

先生的可能副本，谢谢您的指导，但为什么不使用按钮和panel@core114看起来需要修复openNav/closeNav函数。单击后，应设置状态并基于状态显示/隐藏导航。i、 e.this.state.openNav==true