javascript - react 添加滑动 Pane 有一些问题

Question

我是 *Reactjs** 的初学者，我试图添加这个 slide pane对于我的 react 项目。添加的滑动 Pane 无法正常工作，任何人都知道如何为 reactjs 正确添加它。

Stack blitz Here 谢谢

我的代码部分

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;

AgentView.test.js

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

Answer 1

读取错误

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

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

React 是用 JSX 构建的，规则之一是每个表达式都必须包含在父级中。您的 sidePanel div 和按钮是没有 parent 的 sibling 。因此，将它们包装在一个 div 中可以解决这个问题，并且该组件将呈现。

https://stackblitz.com/edit/react-ni1uvx

render() {
    return (
      <div>
        <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>
      </div>
    );
  }