Question

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

invariant.js：42未捕获错误：对象无效作为React子对象（找到：具有键{renderValidation}的对象）。如果您要渲染子集合，请使用数组。       在InputField中（由ConnectedField创建）       在ConnectedField中（由Connect（ConnectedField）创建）       在Connect（ConnectedField）中（由Field创建）       在Field中（由LoginForm创建）       在div中（由LoginForm创建）       在表单中（由LoginForm创建）       在LoginForm中（由Form（LoginForm）创建）       在窗体（LoginForm）中（由Connect（Form（LoginForm）创建））       在Connect（Form（LoginForm））（由ReduxForm创建）       在ReduxForm中（由Login创建）       在div中（由Login创建）       在div中（由Login创建）       在div中（由Login创建）       在div中（由Login创建）       在div中（由Login创建）       在部分（由登录创建）       在登录中（由Connect（登录）创建）       在Connect（登录）（由Route创建）       在路线       在div       在路由器（由ConnectedRouter创建）       在ConnectedRouter中       在提供者       在不变量（invariant.js：42）       at throwOnInvalidObjectType（react-dom.development.js：6748）       at reconcileChildFibers（react-dom.development.js：7659）       at reconcileChildrenAtExpirationTime（react-dom.development.js：7756）       在reconcileChildren（react-dom.development.js：7747）       在finishClassComponent（react-dom.development.js：7881）       在updateClassComponent（react-dom.development.js：7850）       在beginWork（react-dom.development.js：8225）       at performUnitOfWork（react-dom.development.js：10224）       at workLoop（react-dom.development.js：10288）

VM250629：20组件中出现上述错误：       在InputField中（由ConnectedField创建）       在ConnectedField中（由Connect（ConnectedField）创建）       在Connect（ConnectedField）中（由Field创建）       在Field中（由LoginForm创建）       在div中（由LoginForm创建）       在表单中（由LoginForm创建）       在LoginForm中（由Form（LoginForm）创建）       在窗体（LoginForm）中（由Connect（Form（LoginForm）创建））       在Connect（Form（LoginForm））（由ReduxForm创建）       在ReduxForm中（由Login创建）       在div中（由Login创建）       在div中（由Login创建）       在div中（由Login创建）       在div中（由Login创建）       在div中（由Login创建）       在部分（由登录创建）       在登录中（由Connect（登录）创建）       在Connect（登录）（由Route创建）       在路线       在div       在路由器（由ConnectedRouter创建）       在ConnectedRouter中       在提供者

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

＆＃13;

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;

＆＃13;

Answer 1

render()方法必须返回单个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()只能返回一个元素。

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

2 个答案: