javascript - 如何在不渲染的情况下将道具发送到组件
问题描述
我想知道如何在单击按钮后将道具从一个组件(页面)发送到下一个组件,而不在同一页面上呈现新组件,因为这将是下一页的一部分。在这种情况下,我想将道具选择从 (in /memo) 发送到 in (/memo/start) 并在函数 startMemo() 代码中执行此操作:
备忘录.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;
备忘录启动.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;
主文件: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>
);
}
菜单.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;
解决方案
为了防止路由转换,您需要在运行startMemo
函数后以编程方式进行,我猜是这样的:
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
return <MemoStart selects={selects} />
是错的。改用这样的东西
linkClick = () => { // <=== NOTICE THIS
startMemo();
props.history.push({
pathname: '/memo/start',
state: { selects }
});
}
并在 MemoStart 组件中使用它来访问选择:
props.location.state.selects
只要确保该位置存在于 MemoStart 的道具中
推荐阅读
- devtools - 为什么我在 devtools 中收到此错误代码,错误:当我尝试运行 javaScript 文件时,无法在控制台日志中构造“WebSocket”?
- git - 恢复提交或签入新提交?
- reactjs - React Axios-Hooks:分配 URL 并使用 switch 语句调用 useAxios?
- android - Cordova-plugin-multi-player 没有“重新获得”音频焦点
- javascript - 为什么动画旋转中的“angleString”不会更新?
- typescript - 使用带有 Electron 9 的 Typescript 时出错
- android - Android应用程序中莫名其妙的空白/空白区域,未显示在布局预览中
- javascript - 从反应本机客户端本地运行firebase云功能时出现“错误:内部”
- pandas - 如何对熊猫数据框进行切片以获得所需的结果
- bash - 用双引号将等号后的文本括起来