因此,基本上我在这里尝试做的是为我的模式设置切换状态,然后通过警报打开和关闭模块,这应该可以很好地工作。然而,由于某些原因,当我有一个return语句时,我得到了错误“您的呈现方法应该有一个返回语句”。有人知道这可能是什么原因吗?
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;
发布于 2020-04-08 16:29:31
在SingleEmail组件中没有return语句,而是在ModalExample组件中,该组件是在SingleEmail的render方法中定义的。
如果希望将ModelExample布局用作singleEmail组件,可以简单地导出相同的组件,如下所示
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;
发布于 2020-04-08 16:32:51
你在render函数中没有return,你可以返回ModalExample,一切都会好起来的;如下所示:
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;
}
}
https://stackoverflow.com/questions/61096167
复制相似问题