我试图使用redux-form呈现以下自定义字段组件，我也将自定义道具传递给字段组件，但它不断给我一个错误，如下所示：
invariant.js：42未捕获错误：对象无效作为React子对象（找到：具有键的对象） . 如果您要渲染子集合，请使用数组 . 在ConnectField中由ConnectedField创建（由Connect（ConnectedField）创建）由Connect（ConnectedField）创建（由Field创建）在Field（由LoginForm创建）in div（由LoginForm创建）in Login（由LoginForm创建）在LoginForm中（由Form（LoginForm）创建）由Connect（Form（LoginForm））创建的Form（LoginForm）（由Connect（Form（LoginForm）创建））（由ReduxForm创建）在ReduxForm（由Login创建）中div（由Login创建） ）在div中（由登录创建）在div中（由登录创建）在div中（由登录创建）在div中（由登录创建）在登录中创建的部分（由登录创建）（由Connect（登录）创建）在Connect中（登录） ）（由Route创建）在路由器中的路由器中的路由器（由ConnectedRouter创建）在ConnectedRouter中的提供者处于invariant（invariant.js：42），在throwOnInvalidObjectType（react-dom.development.js：6748）处于reconcileChildFibers（react-dom . development.js：7659）在reconcileChildren的reconcileChildrenAtExpirationTime（react-dom.development.js：7756）（react-dom.development.js） ：7747）在finishClassComponent（react-dom.development.js：7881）的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组件中出现上述错误：在ConnectedField中的InputField（由ConnectedField创建）（由Connect（ConnectedField）创建）在Connect（ConnectedField）中）（由Field创建）由Field（由LoginForm创建）在div（由LoginForm创建）的形式（由LoginForm创建）在LoginForm中（由Form（LoginForm）创建）在Form（LoginForm）中（由Connect（Form）创建） ）））在div中的div（由Login创建）（由Login创建）div（由Login创建）div（由Login创建）div（由Login创建）div（由Login创建）中的Connect（Form（LoginForm））（由ReduxForm创建） ）在登录中创建的div（由Login创建）（由Connect（登录）创建）在Connect（登录）中创建的Connect（登录）（由Route创建）在路由器div中提供者中的ConnectedRouter中的ConnectedRouter）考虑向树添加错误边界以自定义错误处理行为 .
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;
2 回答
如上所述，
render()只能返回一个元素 .render()方法必须返回单个HTML节点 . 正如达里奥在评论中所说，如果你将它全部包装在一个_975686中，它就会起作用 .