青春有我
2023-09-14 18:00:25
我的第一個 React/Redux 項(xiàng)目有一個問題,解決它可能并不難,但我很困惑。我想我已經(jīng)做了工作所需的一切,但似乎沒有。所以,我有 HOC 組件PopupWindow.jsxconst PopupWindow = (WrappedComponent) => { return function (props) { const [show, setShow] = useState(false); const handleClose = (value) => { setShow(false); if (value) { props.createMovie(value); } } const handleShow = () => setShow(true); return ( <WrappedComponent show={show} handleClose={handleClose} handleShow={handleShow} {...props}/>) }}export default PopupWindow;標(biāo)頭.jsxconst Header = ({handleShow, handleClose, show, createMovie}) => { return ( <header className="img-blur-container header p-3"> <div className="container"> <div className="d-flex justify-content-between"> <Logo/> <Button className="header_add-movie text-uppercase f-size-18 px-4 py-2" onClick={handleShow} >+ Add movie</Button> <AddMovie show={show} handleClose={handleClose}/> </div> <Search/> </div> </header> )}function mapDispatchToProps(dispatch) { return { createMovie: (movie) => dispatch(createMovie(movie)) }}export default compose(connect(null, mapDispatchToProps),React.memo)(Header);添加電影.jsxconst AddMovie = ({show, handleClose}) => { const [movie] = movies; delete movie.id;
1 回答

拉風(fēng)的咖菲貓
TA貢獻(xiàn)1995條經(jīng)驗(yàn) 獲得超2個贊
您可以通過函數(shù)createMovie僅為文件連接該函數(shù)。如果您還想在文件中使用- 您需要再次連接。Header.jsxmapDispatchToPropscreateMoviePopupWindow.jsx
您必須將此代碼添加到文件末尾 PopupWindow.jsx:它將 PopupWindow 連接到 redux 存儲。
function mapDispatchToProps(dispatch) {
return {
createMovie: (movie) => dispatch(createMovie(movie))
}
}
export default compose(connect(null, mapDispatchToProps),React.
memo)(PopupWindow);
然后,您可以通過 props 發(fā)送函數(shù)createMoviefrom PopupWindowto Header ,并取消連接 in Header,但您可以保留Header代碼不變。
添加回答
舉報(bào)
0/150
提交
取消