React JS上不能有2个或多个const

Question

我在reactjs中相对较新，但是当我试图在一个返回值中包含2个const时遇到了这些错误-来自React-strap的Modal和about内容，我遇到了错误，我无法弄清楚如何解决它。

我正在尝试创建一个简单的网站，但将在每个页面上使用模态函数，但是我不想创建单独的文件modal.js modal2.js modal3.js如何解决此问题或更好的另一种方法实现这个？谢谢

请参见下面和屏幕截图

感谢

import React from "react";
import { Jumbotron as Jumbo, Container } from "react-bootstrap";

//here is where i added the ModalExample
export const About = () => { const } ModalExample = (props) =>  (

  const {
    buttonLabel,
    className
  } = props;

  const [modal, setModal] = useState(false);

  const toggle = () => setModal(!modal);

  <React.Fragment>
    <Jumbo fluid className="jumbo">
      <div className="overlay"></div>
      <Container>
        <h1>About us</h1>
        <p>Learn to code </p>
      </Container>
    </Jumbo>

    <div>
      <Container>
        <h2>About Page</h2>
        <p>This is mostly about us page.</p>
        <p>
          Stare at ceiling lay on arms while you're using the keyboard so this
          human feeds me,
        </p>
      </Container>
    </div>
    <div>
      <Button color="danger" onClick={toggle}>{buttonLabel}</Button>
      <Modal isOpen={modal} toggle={toggle} className={className}>
        <ModalHeader toggle={toggle}>Modal title</ModalHeader>
        <ModalBody>
          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        </ModalBody>
        <ModalFooter>
          <Button color="primary" onClick={toggle}>Do Something</Button>{' '}
          <Button color="secondary" onClick={toggle}>Cancel</Button>
        </ModalFooter>
      </Modal>
    </div>
  </React.Fragment>
);

<< img src =“ https://image.soinside.com/eyJ1cmwiOiAiaHR0cHM6Ly9pLnN0YWNrLmltZ3VyLmNvbS9nb29QVS5wbmcifQ==” alt =“在此处输入图像描述”>

Answer 1

您不能这样做：

export const About = () => { const } ModalExample = (props) =>  (

我不完全知道您要做什么，但是您要么必须这样做：

export const About = () => {
  ...

或此：

const ModalExample = (props) =>  (

您不能同时做两个（可以使一个函数返回一个函数，但是我认为这对React组件不是一个好主意）。