[英]How to send props to component without rendering
I'm wondering how to send props from one component (page) to the next after clicking the button without rendering a new component on the same page because this will be part of the next page.我想知道如何在单击按钮后将道具从一个组件(页面)发送到下一个组件(页面)而不在同一页面上呈现新组件,因为这将成为下一页的一部分。 In this case I want to send props selects from (in /memo) to in (/memo/start) and do this in function startMemo() Code:在这种情况下,我想将道具选择从 (in /memo) 发送到 (/memo/start) 并在 function startMemo() 代码中执行此操作代码:
Memo.js备忘录.js
import React, { useState } from "react";
import { Link, Route } from "react-router-dom";
import MemoStart from "./MemoStart";
const Memo = () => {
const [selects, setSelects] = useState([]);
const startMemo = () => {
const selectId = "1";
const selectCat = "Number";
const selectLang1 = "english";
const selectLang2 = "german";
console.log(selectId, selectCat, selectLang1, selectLang2);
setSelects([selectId, selectCat, selectLang1, selectLang2]);
console.log("selects:", selects);
return <MemoStart selects={selects}/>;
};
return (
<Link to="/memo/start" className="button" onClick={startMemo}>
Start
</Link>
);
};
export default Memo;
MemoStart.js MemoStart.js
import React from "react";
const MemoStart = ({ selects }) => {
console.log({ selects });
return (
<main className="main">
<div className="word__card">
<span className="word__card-title">Choose category: </span>
<ul>{selects}</ul>
</div>
</main>
);
};
export default MemoStart;
Main file: App.js主文件:App.js
import React from "react";
import { BrowserRouter as Router, Switch, Route } from "react-router-dom";
import "./styles.css";
import Menu from "./Menu";
import Memo from "./components/Memo";
import MemoStart from "./components/MemoStart";
export default function App() {
return (
<div className="App">
<Router>
<Menu />
<Switch>
<Route exact path="/memo" component={Memo} />
<Route path="/memo/start" component={MemoStart} />
</Switch>
</Router>
</div>
);
}
Menu.js菜单.js
import React, { useState } from "react";
import { Link } from "react-router-dom";
const Menu = () => {
return (
<nav className="menu">
<ul className="menu__list">
<Link to="/memo" className="menu__list-item">
Memo
</Link>
</ul>
</nav>
);
};
export default Menu;
To prevent the route transition, you need to do it programmatically after you run your startMemo
function, something like this I guess:为了防止路由转换,您需要在运行startMemo
function 后以编程方式执行此操作,我猜是这样的:
import React, { useState } from "react";
import { Link, Route, withRouter } from "react-router-dom";
import MemoStart from "./MemoStart";
const Memo = (props) => { // <=== NOTICE THIS
const [selects, setSelects] = useState([]);
const startMemo = () => {
const selectId = "1";
const selectCat = "Number";
const selectLang1 = "english";
const selectLang2 = "german";
console.log(selectId, selectCat, selectLang1, selectLang2);
setSelects([selectId, selectCat, selectLang1, selectLang2]);
console.log("selects:", selects);
return <MemoStart selects={selects}/>; // <=== THIS IS WRONG!
};
linkClick = () => { // <=== NOTICE THIS
startMemo();
props.history.push('/memo/start');
}
return (
<div className="button-link" onClick={linkClick}> // <=== NOTICE THIS
Start
</div>
);
};
export default withRouter(Memo); // <=== NOTICE THIS
The return <MemoStart selects={selects} />
is wrong. return <MemoStart selects={selects} />
是错误的。 Use something like this instead改用这样的东西
linkClick = () => { // <=== NOTICE THIS
startMemo();
props.history.push({
pathname: '/memo/start',
state: { selects }
});
}
and in the MemoStart component use this to access the selects:并在 MemoStart 组件中使用它来访问选择:
props.location.state.selects
Just be sure that location is present in the props of MemoStart只要确保该位置存在于 MemoStart 的道具中
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.