如何将reduxForm（）和connect（）一起用于反应中的类组件？

Question

在reducer文件中添加了reducer

const reducers = {
  // ... other reducers here ...
  form: formReducer
};

我正在使用redux-form v 7.1.2 with react v 16并使用reduxForm()`` but there is already connect（）`在此类中应用，尝试2接近在同一页面中添加两个HOC但在两个都失败

下面是我的文件的相关代码，请检查并告诉我缺少什么？

1. 使用命名导出

renderField.jsx

    import React from 'react';

    const renderField = ({ input, label, type, meta: { touched, error } }) => (
      <div>
        <label>{label}</label>
        <div>
          <input {...input} placeholder={label} type={type} />
          {touched && error && <span>{error}</span>}
        </div>
      </div>
    );

    export default renderField;

Register.jsx

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

class RegisterPage extends React.Component {
    constructor (props) {
        super(props);
        this.state = {
            user: {
                firstName: ''
            },
            submitted: false
        };

        this.handleSubmit = this.handleSubmit.bind(this);
    }


    handleSubmit (values) {
        this.setState({ submitted: true });
        const { user } = this.state;
        const { dispatch } = this.props;
        dispatch(userActions.register(user));
    }

    render () {
        const { registering } = this.props;
        return (
            <div className="col-md-6 col-md-offset-3">
                <h2>Register</h2>
                <form onSubmit={this.handleSubmit} >
                    <div className="form-group">
                        <Field
                            name="firstName"
                            type="text"
                            label="First Name"
                            className="form-control"
                            component={renderField}
                        />
                    </div>
                    <div className="form-group">
                        <button type="submit" className="btn btn-primary" disabled={this.pristine} >Register</button>
                        { registering && <Loading /> }
                        <Link to="/login" className="btn btn-link">Cancel</Link>
                    </div>
                </form>
            </div>
        );
    }
}

在类定义下面，这里是connect和reduxForm用法

RegisterPage = reduxForm({
    form: 'register',
    destroyOnUnmount: false
})(RegisterPage);

const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);

export { connectedRegisterPage as RegisterPage };

App.jsx

import { RegisterPage } from '../RegisterPage';

<Route path="/register" component={RegisterPage} />

但这会在控制台中发出多个警告

  

道具类型失败：道具component被标记为必需品   Field，但其值为undefined。在现场（由。创建）   RegisterPage）

     

警告：React.createElement：type无效 - 需要一个字符串   （对于内置组件）或类/函数（对于复合   组件）但得到：未定义。你可能忘了导出你的   来自它定义的文件中的组件。检查。的render方法   ConnectedField。

1. 默认导出

Register.jsx

RegisterPage = reduxForm({
    form: 'register'
})(RegisterPage);

const connectedRegisterPage = connect(mapStateToProps)(RegisterPage);

export { connectedRegisterPage as default };

App.jsx

import RegisterPage from '../RegisterPage';
console.log("RegisterPage", RegisterPage); // undefined 

这不会发出警告但在浏览器中显示空白页

Answer 1

您已将renderField导出为default和imported as a named import。纠正它，它应该工作正常

import React from 'react';

    const renderField = ({ input, label, type, meta: { touched, error } }) => (
      <div>
        <label>{label}</label>
        <div>
          <input {...input} placeholder={label} type={type} />
          {touched && error && <span>{error}</span>}
        </div>
      </div>
    );

    export {renderField};