发布
社区首页 >问答首页 >“你的呈现方法应该有一个返回语句”,当我有一个返回语句时

“你的呈现方法应该有一个返回语句”,当我有一个返回语句时
EN

Stack Overflow用户
提问于 2020-04-08 16:12:01
回答 2查看 168关注 0票数 0

因此,基本上我在这里尝试做的是为我的模式设置切换状态,然后通过警报打开和关闭模块,这应该可以很好地工作。然而,由于某些原因,当我有一个return语句时,我得到了错误“您的呈现方法应该有一个返回语句”。有人知道这可能是什么原因吗?

代码语言:javascript
代码运行次数:0
复制
import React, { Component, useState } from "react";

import { Button, Alert, Input, Modal, ModalHeader, ModalBody, ModalFooter } from "reactstrap";

import ViewEmail from "./viewEmail";

class SingleEmail extends Component {
  render() {
    const ModalExample = (props) => {
      const { buttonLabel, className } = props;

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

      const toggle = () => setModal(!modal);
      return (
        <>
          <div>
            <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>
            <Alert
              onClick={toggle}
              className="SingleEmail"
              style={{
                backgroundColor: "white",
                border: "1px solid lightgray",
                color: "black",
              }}
            >
              <div className="CheckBox">
                <Input addon type="checkbox" />
              </div>
              <div className="MarkImportant">
                <i class="fas fa-star"></i>
              </div>

              <p className="EmailFrom">{this.props.From}</p>
              <p className="EmailTitle">{this.props.Subject}</p>
              <p className="EmailDate">{this.props.Date}</p>
            </Alert>
          </div>
        </>
      );
    };
  }
}

export default SingleEmail;
EN

回答 2

Stack Overflow用户

回答已采纳

发布于 2020-04-08 16:29:31

在SingleEmail组件中没有return语句,而是在ModalExample组件中,该组件是在SingleEmail的render方法中定义的。

如果希望将ModelExample布局用作singleEmail组件,可以简单地导出相同的组件,如下所示

代码语言:javascript
代码运行次数:0
复制
const SingleEmail = (props) => {
  const { buttonLabel, className } = props;

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

  const toggle = () => setModal(!modal);
  return (
    <>
      <div>
        <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>
        <Alert
          onClick={toggle}
          className="SingleEmail"
          style={{
            backgroundColor: "white",
            border: "1px solid lightgray",
            color: "black",
          }}
        >
          <div className="CheckBox">
            <Input addon type="checkbox" />
          </div>
          <div className="MarkImportant">
            <i class="fas fa-star"></i>
          </div>

          <p className="EmailFrom">{props.From}</p>
          <p className="EmailTitle">{props.Subject}</p>
          <p className="EmailDate">{props.Date}</p>
        </Alert>
      </div>
    </>
  );
};
export default SingleEmail;
票数 1
EN

Stack Overflow用户

发布于 2020-04-08 16:32:51

你在render函数中没有return,你可以返回ModalExample,一切都会好起来的;如下所示:

代码语言:javascript
代码运行次数:0
复制
class SingleEmail extends Component {
  render() {
    const ModalExample = (props) => {
      const { buttonLabel, className } = props;
      const [modal, setModal] = useState(false);
      const toggle = () => setModal(!modal);
      return (
        <>
          <div>              
            ....
            ....
            ....
          </div>
        </>
      );
    };
    return ModalExample;
  }
}
票数 0
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/61096167

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档