如何在带有链接标签的反应路由器 v5 中将函数作为道具传递

Question

我正在尝试将一个函数从我的一个组件传递到来自 react 路由器的标签内的另一个组件。

我的应用程序中有三个屏幕（LoginScreen、SelectionScreen 和 CreateScreen）。我在登录屏幕中有一个函数 (submit)，我想将它传递给创建屏幕。

当我尝试调用我传递的函数时，我得到：TypeError: this.props.history.location.data.submitFunction is not a function

我尝试使用来自previous post 的答案，但它仍然显示相同的错误。让我知道你们是否需要更多信息。谢谢！

LoginScreen.js

import React from 'react';
import { Link } from "react-router-dom";
import { Button } from 'reactstrap';

export default class LoginScreen extends React.Component {
 constructor(props){
  super(props)
 }
 ...

 submit = () => { // this is the function I want to pass to CreateScreen
  ... do some stuff
 }

 render(){
  return(
   <div>
    ...
    <Button color="secondary">
     <Link to={{
      pathname: "/Selection",
      state: {
       data: this.RandomData  
      },
      data: {
       submitFunction: this.submit
      }
      }}> Next Screen
     </Link>
    </Button>

   </div>

 )}
}

SelectionScreen.js

import React from 'react';
import { Link } from "react-router-dom";
import { Button } from 'reactstrap';
import { withRouter } from 'react-router';

class SelectionScreen extends React.Component {
 constructor(props){
  super(props)
  this.state = {}
 }
 ...


 render(){
  return(
   <div>
    ...
    <Button color="secondary">
     <Link to={{
      pathname: "/Create",
      state: {
       data: this.props.history.location.state.data
      },
      data: {
       submitFunction: this.props.history.location.data.submitFunction
      }
      }}>Next Screen
     </Link>
    </Button>

   </div>

 )}
}
export default withRouter(SelectionScreen)

CreateScreen.js

import React from 'react';
import { Link } from "react-router-dom";
import { Button } from 'reactstrap';
import { withRouter } from 'react-router';

class CreateScreen extends React.Component {
 constructor(props){
  super(props)
  this.state = {}
 }
 ...

 handleClick = (e) => {
  e.preventDefault(e);
  this.props.history.location.data.submitFunction(randomData);
 }

 render(){
  return(
   <div>
    ...
    <Button color="secondary" onPress={this.handleClick}>
     Submit
    </Button>

   </div>

 )}
}
export default withRouter(CreateScreen)

App.js

import React from 'react';
import {
  BrowserRouter as Router,
  Switch,
  Route,
} from "react-router-dom";
import LoginScreen from './LoginScreen.js'
import SelectionScreen from './SelectionScreen.js'
import CreateScreen from './CreateScreen.js'

export default function App() {
 return (
  <div>
   <Router>
    <Switch>
     <Route exact path="/">
      <LoginScreen />
     </Route>
     <Route exact path="/Selection">
      <SelectionScreen />
     </Route>
     <Route exact path="/Create">
      <CreateScreen />
     </Route>
    </Switch>
   </Router>
  </div>
 )
}

Answer 1

您缺少示例中的状态，这就是您指向未定义值并收到错误的原因，例如您的链接如下所示：

 <Link to={{
  pathname: "/Selection",
  state: {
   data: this.RandomData,
   submitFunction: this.submit,
  },
  }}> Next Screen
 </Link>

然后在任何其他具有反应路由器道具的组件中，您需要像这样调用提交函数：

this.props.location.state.submitFunction

或者调用数据对象

this.props.location.state.data

请记住，您的组件在调用之前应该进行一些验证，以防您在不使用 Link 组件的情况下访问页面

 handleClick = (e) => {
  e.preventDefault(e);
  if (this.props.location?.state?.submitFunction) {
   this.props.location.state.submitFunction(randomData)
  }
 }