Question

我想知道如何在单击按钮后将道具从一个组件（页面）发送到下一个组件而不在同一页面上呈现新组件，因为这将是下一页的一部分。在这种情况下，我想将（/ memo）中的道具选择发送到（/ memo / start）中，并在函数startMemo（）中执行此操作代码：

Memo.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

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>
  );
}

Menu.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;

Answer 1

为防止路由过渡，您需要在运行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} />是错误的。使用something like this instead

linkClick = () => {    // <=== NOTICE THIS
  startMemo();
  props.history.push({
    pathname: '/memo/start',
    state: { selects }
  });
}

，并在MemoStart组件中使用它来访问选择：

props.location.state.selects

只需确保MemoStart道具中存在该位置

如何在不渲染的情况下将道具发送到组件

1 个答案: