React开发：如何从含mapStateToProps的函数组件向类组件传值？

首先，咱们来拆解你遇到的问题：你直接调用b()是行不通的，因为connect(mapStateToProps)(b)返回的是一个React组件，不是普通的JavaScript函数。直接调用它不会触发Redux的连接逻辑，自然也不会执行mapStateToProps，更不会给组件注入props，而且你代码里的name = props.details.name还存在语法错误，应该是name: props.name。

正确的解决方案：抽离可复用的状态映射逻辑 #

解决思路是把mapStateToProps从组件中抽成独立的纯函数，这样类组件和函数组件都能复用这个逻辑，而不是去调用被connect包装后的组件。

步骤1：抽离mapStateToProps到可导出的函数

修改你的B.js，把状态映射逻辑单独导出：

// B.js
import { connect } from "react-redux";

// 抽离独立的mapStateToProps函数，供其他组件复用
export const mapStateToProps = (state) => {
  return { name: state.detailReducer.name };
};

// 函数组件继续使用这个mapStateToProps
const B = (props) => {
  // 这里可以根据需要返回JSX或者处理数据
  const data = { name: props.name };
  return data; // 如果是组件，建议返回JSX，比如<div>{props.name}</div>
};

export default connect(mapStateToProps)(B);

步骤2：在类组件A中复用这个mapStateToProps

让类组件A也通过connect连接Redux，复用同一个状态映射逻辑：

// A.js
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { mapStateToProps } from './B';
import Button from 'your-button-component-path'; // 记得导入Button组件

export class A extends Component {
  submit = () => {
    // 直接使用通过connect注入的props
    const data = { name: this.props.name };
    // 在这里执行你的提交逻辑，比如发送请求等
    console.log('提交的数据:', data);
  };

  render() {
    return (
      <div>
        <Button onClick={this.submit}>Submit</Button>
      </div>
    );
  }
}

// 复用B.js中的mapStateToProps，注入状态到A组件的props
export default connect(mapStateToProps)(A);

关于你的第二个问题：从其他组件调用mapStateToProps是好的实践吗？ #

准确来说，抽离独立的、可复用的mapStateToProps纯函数是非常好的实践，但不是去调用被connect包装后的组件。

mapStateToProps本身就是一个纯函数：接收Redux的state，返回组件需要的props。把它抽离出来复用，能有效减少重复代码，保证不同组件获取状态的逻辑一致。但直接调用被connect包装后的组件（比如你之前的b()）是错误的用法，因为connect返回的是React组件，必须通过JSX语法渲染（比如<B />）才能触发Redux的连接逻辑，执行mapStateToProps并注入props。

如果你的类组件不想通过connect连接Redux，还有一种方式是直接获取Redux store的状态，但这种方式需要手动订阅状态变化，不如connect或者useSelector（函数组件）方便，所以更推荐用上面的复用mapStateToProps+connect的方式。

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