Redux 表单 - 呈现以下自定义组件时出现错误？不知道为什么？

Question

我正在尝试使用 redux-form 呈现以下自定义字段组件，我还将自定义道具传递给字段组件，但是它一直给我如下错误：

invariant.js:42 Uncaught Error: Objects are not valid as a React child (found: object with keys {renderValidation}). If you meant to render a collection of children, use an array instead. in InputField (created by ConnectedField) in ConnectedField (created by Connect(ConnectedField)) in Connect(ConnectedField) (created by Field) in Field (created by LoginForm) in div (created by LoginForm) in form (created by LoginForm) in LoginForm (created by Form(LoginForm)) in Form(LoginForm) (created by Connect(Form(LoginForm))) in Connect(Form(LoginForm)) (created by ReduxForm) in ReduxForm (created by Login) in div (created by Login) in div (created by Login) in div (created by Login) in div (created by Login) in div (created by Login) in section (created by Login) in Login (created by Connect(Login)) in Connect(Login) (created by Route) in Route in div in Router (created by ConnectedRouter) in ConnectedRouter in Provider at invariant (invariant.js:42) at throwOnInvalidObjectType (react-dom.development.js:6748) at reconcileChildFibers (react-dom.development.js:7659) at reconcileChildrenAtExpirationTime (react-dom.development.js:7756) at reconcileChildren (react-dom.development.js:7747) at finishClassComponent (react-dom.development.js:7881) at updateClassComponent (react-dom.development.js:7850) at beginWork (react-dom.development.js:8225) at performUnitOfWork (react-dom.development.js:10224) at workLoop (react-dom.development.js:10288)

VM250629:20 The above error occurred in the component: in InputField (created by ConnectedField) in ConnectedField (created by Connect(ConnectedField)) in Connect(ConnectedField) (created by Field) in Field (created by LoginForm) in div (created by LoginForm) in form (created by LoginForm) in LoginForm (created by Form(LoginForm)) in Form(LoginForm) (created by Connect(Form(LoginForm))) in Connect(Form(LoginForm)) (created by ReduxForm) in ReduxForm (created by Login) in div (created by Login) in div (created by Login) in div (created by Login) in div (created by Login) in div (created by Login) in section (created by Login) in Login (created by Connect(Login)) in Connect(Login) (created by Route) in Route in div in Router (created by ConnectedRouter) in ConnectedRouter in Provider

Consider adding an error boundary to your tree to customize error handling behavior.

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class InputField extends Component {
    render() {
        const { input, label, id, minlength, maxlength, required, meta: { touched, error } } = this.props;

        console.log('InputField - render', input, label, id, minlength, maxlength, required, touched, error);

        let renderValidation = function() {
            if (touched && !error) {
                return <i className="fa fa-check tm-form-valid"></i>;
            } else if (touched && error) {
                return <i className="fa fa-exclamation-triangle tm-form-invalid tooltip tooltip-effect tooltip-item"><span className="tooltip-content clearfix"><span className="tooltip-text">{error}</span></span></i>;
            }
        }

        return (
            <span className="input input--isao">
                <input {...input}
                    className="input__field input__field--isao"
                    spellCheck="false"
                    label={label}
                    id={id}
                    minLength={minlength}
                    maxLength={maxlength}
                    required={required} />
            </span>,

            <label className="input__label input__label--isao"
                htmlFor={id}
                data-content={label}>
                <span className="input__label-content input__label-content--isao">
                    {label}
                </span>
            </label>,

            {renderValidation}
        );
    }
}

InputField.propTypes = {
    input: PropTypes.object.isRequired,
    label: PropTypes.string.isRequired,
    id: PropTypes.string.isRequired,
    minlength: PropTypes.string.isRequired,
    maxlength: PropTypes.string.isRequired,
    required: PropTypes.bool.isRequired,
    meta: PropTypes.object.isRequired,
    touched: PropTypes.bool,
    error: PropTypes.string
};

export default InputField;

Answer 1

render() 方法必须 return 单个 HTML 节点。正如达里奥在他的评论中所说，如果你把它全部包装在一个 <div> 中，它就会起作用。

Answer 2

import React, { Component } from 'react';
import PropTypes from 'prop-types';

class InputField extends Component {
    render() {
        const { input, label, id, minlength, maxlength, required, meta: { touched, error } } = this.props;

        console.log('InputField - render', input, label, id, minlength, maxlength, required, touched, error);

        let renderValidation = function() {
            if (touched && !error) {
                return <i className="fa fa-check tm-form-valid"></i>;
            } else if (touched && error) {
                return <i className="fa fa-exclamation-triangle tm-form-invalid tooltip tooltip-effect tooltip-item"><span className="tooltip-content clearfix"><span className="tooltip-text">{error}</span></span></i>;
            }
        }

        return (<div className="wrapper">
            <span className="input input--isao">
                <input {...input}
                    className="input__field input__field--isao"
                    spellCheck="false"
                    label={label}
                    id={id}
                    minLength={minlength}
                    maxLength={maxlength}
                    required={required} />
            </span>,

            <label className="input__label input__label--isao"
                htmlFor={id}
                data-content={label}>
                <span className="input__label-content input__label-content--isao">
                    {label}
                </span>
            </label>,

            {renderValidation}
        </div>);
    }
}

InputField.propTypes = {
    input: PropTypes.object.isRequired,
    label: PropTypes.string.isRequired,
    id: PropTypes.string.isRequired,
    minlength: PropTypes.string.isRequired,
    maxlength: PropTypes.string.isRequired,
    required: PropTypes.bool.isRequired,
    meta: PropTypes.object.isRequired,
    touched: PropTypes.bool,
    error: PropTypes.string
};

export default InputField;

如上所述，render()可以return只有一个元素。

Redux 表单 - 呈现以下自定义组件时出现错误？不知道为什么？

Redux Form - I get an error when rendering the below custom component? Do not know why?

react-redux

redux-form

redux-thunk

react-router-redux