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

Question

我试图使用redux-form渲染以下自定义字段组件，我也传递自定义道具到字段组件，但是它一直给我一个错误如下：

不变的js:42未捕获错误：对象作为React子对象无效（找到：具有键{renderValidation}的对象）。如果要呈现子对象集合，请改用数组。在InputField中（由ConnectedField创建）在ConnectedField中（由ConnectedField创建）在Connect中（由Field创建）在Field中（由LoginForm创建）在div中（由LoginForm创建）在form中（由LoginForm创建）在LoginForm中（由form（LoginForm创建））在form（LoginForm）中（由Connect（form（LoginForm（LoginForm））在Connect中创建在路由器中的div中的div中的div中的div中的div中的div（通过登录创建）在div中的div（通过登录创建）在div中的div中的div（通过登录创建）在div中的div中的div（通过登录创建）在登录中的部分（通过登录创建）在路由器中的div中的Connect（通过登录创建（由ConnectedRouter创建）在Conference（invariant.js:42）的ConnectedRouter提供程序中，在ConferenceChildFileDfiers（react dom.development.js:6748）的ConferenceChildrenateExpirationTime（react dom.development.js:7756）的ConferenceChildren（react dom.development.js:7747）的InvalidObject类型中在workLoop（react dom.development.js:10288）的PerformityWork（react dom.development.js:8225）的updateClassComponent（react dom.development.js:7881）和beginWork（react dom.development.js:7850）的finishClassComponent（react dom.development.js:7881）

VM250629:20组件中出现上述错误：在InputField（由ConnectedField创建）在ConnectedField（由Connect（连接字段）创建）在Connect（连接字段）（由字段创建）在Field（由LoginForm创建）在div（由LoginForm创建）在表单（由LoginForm创建）在LoginForm（由Form（LoginForm）创建）在Form（LoginForm）（由Connect（Form（LoginForm）创建））在Connect（Form（LoginForm））（由ReduxForm创建）在ReduxForm（由Login创建）在div（由Login创建）在div（由Login创建）在div（由Login创建）在div（由登录创建）在div（由登录创建）在节（由登录创建）在登录（由连接（登录）创建）在连接（登录）（由路由创建）在路由在提供商的连接路由器中的div（由连接路由器创建）

考虑将错误边界添加到树中以自定义错误处理行为。

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（）方法必须返回单个HTML节点。正如Dario在评论中所说，如果你把它全部用

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;

如上所述，渲染（）只能返回一个元素。