如何在Redux Form子组件Form.js中获取父组件App.js的props？

别担心，我刚上手redux-form的时候也踩过这个坑！问题核心出在reduxForm这个高阶组件上——它会把你的Form组件包裹起来，默认情况下外部传入的props不会直接透传到你的组件里，只需要做一点小调整就能解决。

下面给你两种常用的解决方法：

方法一：在mapStateToProps中使用ownProps #

如果你用connect和reduxForm一起包装组件，可以在mapStateToProps的第二个参数拿到父组件传来的ownProps，再把需要的data合并到组件props里：

// Form.js
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';

const MyForm = (props) => {
  // 现在就能正常访问props.data了
  console.log(props.data);
  return (
    <form onSubmit={props.handleSubmit}>
      {/* 你的表单字段示例 */}
      <Field name="username" component="input" type="text" />
      <button type="submit">提交</button>
    </form>
  );
};

// 第二个参数ownProps就是父组件传递过来的所有props
const mapStateToProps = (state, ownProps) => {
  return {
    data: ownProps.data // 将父组件的data绑定到Form组件的props上
  };
};

// 注意顺序：先connect再用reduxForm包装，不然拿不到ownProps
export default connect(mapStateToProps)(reduxForm({ form: 'myForm' })(MyForm));

方法二：开启enableReinitialize配置（用于初始化表单场景） #

如果你的data是用来初始化表单值的，可以开启enableReinitialize，同时把initialValues和父组件的data绑定，这样既能拿到data，又能同步表单初始值：

// Form.js
import { reduxForm, Field } from 'redux-form';
import { connect } from 'react-redux';

const MyForm = (props) => {
  console.log(props.data); // 同样能正常访问data
  return (
    <form onSubmit={props.handleSubmit}>
      <Field name="username" component="input" type="text" />
      <button type="submit">提交</button>
    </form>
  );
};

const mapStateToProps = (state, ownProps) => {
  return {
    initialValues: ownProps.data, // 用父组件的data初始化表单
    data: ownProps.data // 同时把data传到组件props里
  };
};

export default connect(mapStateToProps)(
  reduxForm({
    form: 'myForm',
    enableReinitialize: true // 开启后，当initialValues变化时会重新初始化表单
  })(MyForm)
);

关键注意点 #

• 必须保证connect在reduxForm之前执行，否则ownProps无法获取到父组件的参数；
• 如果你没有用connect，只是单纯用reduxForm包装组件，也可以直接尝试在组件中访问props.data，但高阶组件可能会拦截部分props，所以更稳妥的是用上面的方法。

最后再确认下App.js的调用方式（确保你是这样传参的）：

// App.js
import Form from './Form';

class App extends Component {
  state = {
    data: { username: 'testUser' } // 假设这是你获取到的用户数据
  };

  render() {
    return <Form data={this.state.data} />;
  }
}

这样调整后，你在Form.js里就能正常访问this.props.data啦！

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