React路由中传递组件函数失败，无法在子组件函数中调用

我帮你梳理下可能的问题点，以及修正后的代码示例：

首先先明确几个关键注意点：

• 你用箭头函数定义的modalLogin已经自动绑定了this指向，这部分操作是没问题的，不用额外在构造函数里做绑定处理。
• withRouter的适用场景是：当组件不是直接通过Route的render/component属性渲染时，才需要用它注入路由props。你的App组件是包裹Router的顶层组件，其实完全不需要加withRouter，加了反而属于多此一举。

修正后的App组件代码 #

import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';
import LoginModal from './LoginModal';

class App extends Component {
  modalLogin = () => {
    console.log('modal login ...');
  };

  render() {
    return (
      <Router>
        {/* 通过render方法传递自定义函数和路由props */}
        <Route 
          path="/login" 
          render={(routeProps) => (
            <LoginModal 
              {...routeProps} // 传递所有路由相关props
              modalLogin={this.modalLogin} // 传递自定义函数
            />
          )} 
        />
      </Router>
    );
  }
}

// 顶层App组件无需withRouter，本身不依赖路由props
export default App;

子组件LoginModal的正确调用方式 #

不管是函数组件还是类组件，只要正确接收props就能正常调用传递过来的函数：

函数组件版本

import React from 'react';

const LoginModal = (props) => {
  // 自定义函数中调用传递过来的modalLogin
  const handleTriggerLogin = () => {
    props.modalLogin();
  };

  return (
    <div>
      <h2>登录弹窗</h2>
      <button onClick={handleTriggerLogin}>触发登录逻辑</button>
    </div>
  );
};

export default LoginModal;

类组件版本

import React, { Component } from 'react';

class LoginModal extends Component {
  handleTriggerLogin = () => {
    // 类组件中通过this.props调用函数
    this.props.modalLogin();
  };

  render() {
    return (
      <div>
        <h2>登录弹窗</h2>
        <button onClick={this.handleTriggerLogin}>触发登录逻辑</button>
      </div>
    );
  }
}

export default LoginModal;

常见坑点排查 #

• 子组件未正确接收props：类组件要记得用this.props，函数组件要确保把props作为参数传入；
• withRouter滥用：只有非Route直接渲染的组件才需要用它，顶层组件完全没必要；
• 路由匹配问题：可以先检查子组件是否真的被路由渲染出来，或者在子组件里打印console.log(props)，确认是否拿到了modalLogin函数。

内容的提问来源于stack exchange，提问作者giveemheller