问题描述
我正在为React练习开发一个Twitch克隆应用程序,并且我正在为用户想要删除视频流的时候创建一个模式弹出窗口。基本上,它们具有一个流列表,单击其中一个流上的删除按钮,然后使用ReactDOM.createPortal
这是删除按钮
import React from "react";
import Modal from "../Modal";
const StreamDelete = () => {
return (
<>
<Modal />
</>
);
};
export default StreamDelete;
这是模态的代码
import React from "react";
import ReactDOM from "react-dom";
import { Redirect } from "react-router-dom";
const Modal = () => {
return ReactDOM.createPortal(
<div
className="ui dimmer modals visible active"
onClick={ () => {
return <Redirect to="/" />;
} }
>
<div className="ui standard modal visible active">
<div className="header">Delete Stream</div>
<div className="content">
Are you sure you want to delete this stream?
</div>
<div className="actions">
<button className="ui primary button">Delete</button>
<button className="ui button">Cancel</button>
</div>
</div>
</div>,document.querySelector("#modal")
);
};
export default Modal;
只能在React-Router路由 / streams /:id / delete
上查看此模式我的预期行为是,当我单击深色背景上的onClick
函数时,应该返回<Redirect to="/">
,这应该会关闭“模态”窗口,因为它不在该路径中呈现。 / p>
我得到的行为是,尽管我也没有收到任何错误,但单击深色背景仍未重定向。
有关其他情况,此项目的GIT存储库位于Glitch Client
到目前为止,我在Ncoughlin: Tag Twitch Clone
上有关于该项目所有部分的大量注释。解决方法
由于StreamDelete
由Route
组件直接渲染
<Route path="/streams/:id/delete" exact component={StreamDelete} />
解决方案
它已通过路线道具,因此可以使用history
道具。您可以在StreamDelete
中使用它,并将回调传递给模式以采取所需的操作。
const StreamDelete = ({ history }) => {
const doRedirect = () => history.replace("/");
return (
<>
<Modal onDelete={doRedirect} />
</>
);
};
模式
const Modal = ({ onDelete }) => {
return ReactDOM.createPortal(
<div
className="ui dimmer modals visible active"
onClick={onDelete}
>
<div className="ui standard modal visible active">
<div className="header">Delete Stream</div>
<div className="content">
Are you sure you want to delete this stream?
</div>
<div className="actions">
<button className="ui primary button">Delete</button>
<button className="ui button">Cancel</button>
</div>
</div>
</div>,document.querySelector("#modal")
);
};
替代
声明性实现,如果您出于某种原因想要避免使用history
道具。
在模式中使用某些“重定向”状态有条件地渲染Redirect
。
const Modal = () => {
const [redirect,setRedirect] = useState(false);
if (redirect) {
return <Redirect to="/" />;
}
return ReactDOM.createPortal(
<div
className="ui dimmer modals visible active"
onClick={() => setRedirect(true)}
>
<div className="ui standard modal visible active">
<div className="header">Delete Stream</div>
<div className="content">
Are you sure you want to delete this stream?
</div>
<div className="actions">
<button className="ui primary button">Delete</button>
<button className="ui button">Cancel</button>
</div>
</div>
</div>,document.querySelector("#modal")
);
};
建议的选择
请勿将应用程序行为与外观(即模式)组件结合在一起。在模态得到一些“确认”后,有条件地在Redirect
中渲染StreamDelete
。
const StreamDelete = () => {
const [confirm,setConfirm] = useState(false);
return confirm ? (
<Redirect to="/" />
) : (
<Modal onConfirm={() => setConfirm(true)} />
);
};
,
通过遵循上面链接的文章中的示例,我也能够使它起作用。转换为组件,创建状态,使用单击处理程序触发帮助程序函数,该函数设置状态以有条件地呈现重定向。
f3 <- function(x) paste0(unlist(strsplit(x,",\\s*")),"%")
f3(x)
#[1] "j309%" "j405%" "j667%"
f3(z)
#[1] "j309%" "j405%" "j667%" "j662%"
f3(y)
#[1] "j309%" "j405%" "j667%" "j666%"
f3(w)
#[1] "j309%"
中进行了解释