Javascript 如何从另一个组件打开rect引导模式对话框
我学习了react，并有了这个模态对话框 我想知道如何在其他组件中使用它。Javascript 如何从另一个组件打开rect引导模式对话框,javascript,reactjs,modal-dialog,react-bootstrap,Javascript,Reactjs,Modal Dialog,React Bootstrap,我学习了react，并有了这个模态对话框 我想知道如何在其他组件中使用它。 下面是该页面中的示例，该示例直接显示了组件的自打开/关闭对话框： function Example() { const [show, setShow] = useState(false); const handleClose = () => setShow(false); const handleShow = () => setShow(true); return ( <&g
下面是该页面中的示例，该示例直接显示了组件的自打开/关闭对话框：
function Example() {
const [show, setShow] = useState(false);
const handleClose = () => setShow(false);
const handleShow = () => setShow(true);
return (
<>
<Button variant="primary" onClick={handleShow}>
Launch demo modal
</Button>
<Modal show={show} onHide={handleClose}>
<Modal.Header closeButton>
<Modal.Title>Modal heading</Modal.Title>
</Modal.Header>
<Modal.Body>Woohoo, you're reading this text in a modal!</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
<Button variant="primary" onClick={handleClose}>
Save Changes
</Button>
</Modal.Footer>
</Modal>
</>
);
}
render(<Example />);
显示已定义…
我尝试了很多方法来理解这样的逻辑，例如：
function Example(props) {
let { show } = props;
const [showing, setShow] = useState(false);
const handleClose = () => {
show = false;
setShow(false);
};
return (
<div>
<Modal show={show || showing} onHide={handleClose} centered>
这里有一个打开对话框的位置：按钮是谁打开的
import React, { useState } from 'react';
import styled from 'styled-components';
import Dashboard from './Dashboard';
function SignedInButton() {
const [show, setShow] = useState(false);
const handleShow = () => setShow(true);
return (
<div>
<Button className="button is-large" onClick={handleShow}>
<span className="icon is-medium">
<i className="fas fa-user" />
</span>
</Button>
<Dashboard show={show} />
</div>
);
}
const Button = styled.button`
height: 68px;
display: flex;
align-items: center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 5px;
color: var(--button-text-color);
padding: 0 1rem;
justify-content: space-between;
background: var(--button-background);
border-radius: 6px;
&:hover {
background: var(--button-hover-background);
}
@media (max-width: 768px) {
display: none;
}
`;
export default SignedInButton;
import React，{useState}来自“React”；
从“样式化组件”导入样式化；
从“/Dashboard”导入仪表板；
函数SignedInButton（）{
const[show，setShow]=useState（false）；
常量handleShow=（）=>setShow（true）；
返回(
);
}
const Button=styled.Button`
高度：68px；
显示器：flex；
对齐项目：居中；
边际上限：0px；
边缘底部：0px；
左边距：5px；
颜色：var（--按钮文本颜色）；
填充：0 1rem；
证明内容：之间的空间；
背景：var（--按钮背景）；
边界半径：6px；
&：悬停{
背景：var（--按钮悬停背景）；
}
@介质（最大宽度：768px）{
显示：无；
}
`;
导出默认签名按钮；
据我所知，您希望在仪表板
和登录按钮
之间共享显示
的状态，因为应用程序中一次只能打开一个模式
您应该处理顶部组件中的show
状态、handleShow
函数和handleClose
函数，在这种情况下，它是signedButton
。然后，您应该将show
boolean和handleClose
函数作为道具向下传递给子组件，在本例中为仪表板
签名按钮
函数签名按钮（）{
const[show，setShow]=useState（false）；
常量handleShow=（）=>setShow（true）；
const handleClose=（）=>setShow（false）；
返回(
);
}
// ...
仪表板
const Dashboard=props=>{
const{show，onClose}=props；
返回(
用户配置文件
您似乎没有活动的Internet连接！
接近
);
};
您想在哪个组件中打开/关闭示例组件的模式？我用code更新按钮是否为示例组件的子组件或父组件签名？因为如果没有，您将需要创建应用程序的全局存储，其中包含诸如Redux之类的库……是的，signedButton
是打开带有my对话框的仪表板的父级。另外，我从另一个组件打开仪表板
，就像从“./Dashboard”导入仪表板一样。这不好吗？我还使用React-Redux，可以MapStateTrops
打开对话框！谢谢，但我想我必须重新考虑，因为我有两个仪表板组件，我想我可以让它工作，所以只有一个对吗？我从两个组件执行此操作！我使用了，看到有两个，我认为Redux更好？？是的，它创建了一个反应场景learn@Kid也可以使用redux/react redux。在这种情况下，您必须将show
布尔值存储在redux存储中，并更改函数以分派操作。不过，对于这种用例，我建议不要这样做。在我看来，Redux应该尽可能少地使用，因为它增加了很多复杂性，但收益却很少。通常，它应该为身份验证变量和其他全局变量保留。经验法则是，如果您不确定是否需要它，则不需要：。然而，如果目标是实践，那么无论如何，去实践吧
import React, { useState } from 'react';
import { Modal } from 'react-bootstrap';
import { Offline } from 'react-detect-offline';
import styled from 'styled-components';
import ProfilePageAuthenticated from './ProfilePageAuthenticated';
import ProfilePageAnonymous from './ProfilePageAnonymous';
import LinkAccounts from './LinkAccounts';
import SummaryPage from './SummaryPage';
import ContributePage from './ContributePage';
const Dashboard = props => {
const { show } = props;
const [showing, setShow] = useState(false);
const handleClose = () => setShow(false);
return (
<div>
<Modal show={show} onHide={handleClose} centered>
<Modal.Header closeButton>
<Modal.Title>User Profile</Modal.Title>
</Modal.Header>
<Modal.Body>
<ProfilePageAuthenticated />
<ProfilePageAnonymous />
<LinkAccounts />
<SummaryPage />
<ContributePage />
<Offline>
<div
style={{
marginTop: 40,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'red',
}}
>
It appears you don't have an active Internet connection!
</div>
</Offline>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={handleClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</div>
);
};
const Button = styled.button`
height: 68px;
display: flex;
align-items: center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 5px;
color: var(--button-text-color);
padding: 0 1rem;
justify-content: space-between;
background: var(--button-background);
border-radius: 6px;
&:hover {
background: var(--button-hover-background);
}
@media (max-width: 768px) {
display: none;
}
`;
export default Dashboard;
import React, { useState } from 'react';
import styled from 'styled-components';
import Dashboard from './Dashboard';
function SignedInButton() {
const [show, setShow] = useState(false);
const handleShow = () => setShow(true);
return (
<div>
<Button className="button is-large" onClick={handleShow}>
<span className="icon is-medium">
<i className="fas fa-user" />
</span>
</Button>
<Dashboard show={show} />
</div>
);
}
const Button = styled.button`
height: 68px;
display: flex;
align-items: center;
margin-top: 0px;
margin-bottom: 0px;
margin-left: 5px;
color: var(--button-text-color);
padding: 0 1rem;
justify-content: space-between;
background: var(--button-background);
border-radius: 6px;
&:hover {
background: var(--button-hover-background);
}
@media (max-width: 768px) {
display: none;
}
`;
export default SignedInButton;
function SignedInButton() {
const [show, setShow] = useState(false);
const handleShow = () => setShow(true);
const handleClose = () => setShow(false);
return (
<div>
<Button className="button is-large" onClick={handleShow}>
<span className="icon is-medium">
<i className="fas fa-user" />
</span>
</Button>
<Dashboard show={show} onClose={handleClose}/>
</div>
);
}
// ...
const Dashboard = props => {
const { show, onClose } = props;
return (
<div>
<Modal show={show} onHide={onClose} centered>
<Modal.Header closeButton>
<Modal.Title>User Profile</Modal.Title>
</Modal.Header>
<Modal.Body>
<ProfilePageAuthenticated />
<ProfilePageAnonymous />
<LinkAccounts />
<SummaryPage />
<ContributePage />
<Offline>
<div
style={{
marginTop: 40,
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
color: 'red',
}}
>
It appears you don't have an active Internet connection!
</div>
</Offline>
</Modal.Body>
<Modal.Footer>
<Button variant="secondary" onClick={onClose}>
Close
</Button>
</Modal.Footer>
</Modal>
</div>
);
};