Redux Form Wrapped Inside Custom Portal Component?

问题

I keep getting this error when trying to put a redux-form inside a custom modal component I created: Error: Field must be inside a component decorated with reduxForm().

Basically, I have a view where the user sees their post. When the go to edit the name of their post, a form pops up using the modal component to display a redux form. When the user clicks the Save/Submit button on the modal, I want the form to validate and then callback to the parent post view component, which in turn will handle calling the action creator to update the post name.

I think it has something to do with how I'm trying to use props.children to pass the form into my modal. In trying to find a solution, I found something about React.cloneElement, but I'm not sure how to use that and if that even would help me resolve this issue. Perhaps there's a completely different approach I should be taking?

Form via Modal:

// ----- IMPORTS ----- //
import React, { Component } from 'react';
import { Field, reduxForm } from 'redux-form';

import Modal from '../overlays/modal';
import { validate } from '../../validators/post-validator';


// ----- COMPONENT ----- //
class MyModal extends Component {

    constructor( props ) {

        super( props );
        this.onSubmit = this.onSubmit.bind( this );
    }

    render() {

        const { handleClose, handleSubmit, show } = this.props;

        return (
            <Modal handleClose={ handleClose } show={ show }>
                <form onSubmit={ handleSubmit( this.onSubmit ) }>
                    <Field
                        name="name"
                        type="text"
                        component="input"
                    />
                    <button type="button" onClick={ handleClose }>Cancel</button>
                    <button type="submit">Save</button>
                </form>
            </Modal>
        );
    }

    onSubmit( values ) {
        console.log( 'MyModal: onSubmit', values );

        e.preventDefault();
        this.props.handleConfirm( values );
    }
}


// ----- EXPORT ----- //
export default reduxForm( {
    form: 'editNameForm',
    validate
} )( MyModal );

Modal:

// ----- IMPORTS ----- //
import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import { Provider } from 'react-redux';

import store from '../../stores/store';


// ----- COMPONENT ----- //
class Modal extends Component {

    constructor( props ) {

        super( props );

        this.modalContainer;
        this.modalWrapper;

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

    componentDidMount() {

        this.modalWrapper = document.createElement( 'div' );
        document.body.appendChild( this.modalWrapper );
        this.renderModal();
    }

    componentDidUpdate() {
        console.log( 'Modal: componentDidUpdate', this.props.show );

        this.renderModal();
    }

    componentWillUnmount() {

        document.body.removeChild( this.modalWrapper );
        this.modalWrapper = undefined;
    }

    render() {
        console.log( 'Modal: render', this.props.show );

        return <noscript />;
    }

    renderModal() {

        const modalClass = ( this.props.show ) ? 'modal fade in': 'modal fade';
        const modalDisplay = ( this.props.show ) ? 'block': '';
        const modalStyle = { display: modalDisplay };

        ReactDOM.render(
            <Provider store={ store }>
                <div className={ modalClass } tabIndex="-1" ref={ elem => { this.modalContainer = elem; } } role="dialog" style={ modalStyle } onClick={ this.onClick }>
                    <div className="modal-dialog" role="document">
                        <div className="modal-content">
                            { this.props.children }
                        </div>
                    </div>
                </div>
            </Provider>
        , this.modalWrapper );
    }

    onClick( e ) {
        console.log( 'Modal: onClick' );

        e.preventDefault();

        if ( !this.props.disabled && e.target === this.modalContainer )
            this.props.handleClose( e );
    }
}


// ----- EXPORT ----- //
export default Modal;

来源：https://stackoverflow.com/questions/44723396/redux-form-wrapped-inside-custom-portal-component