javascript - 带有react-form的嵌套组件react.cloneElement

Question

我想解决此库的问题:react-form 。有关信息，这是我当前的错误:

Uncaught Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: object. Check the render method of CustomInput.

这就是我正在尝试做的:

<CustomInput field="date" showErrors={false}>
    <DatePickerForm />
</CustomInput>

这是我的自定义输入组件:

import React, { Component } from 'react';
import FormInput from 'react-form';

class CustomInput extends Component {
  render() {
    const { showErrors, field, children } = this.props;
    return (
      <FormInput showErrors={showErrors} field={field}>
        {({ setValue }) => {
          return (
            React.cloneElement(children, { setValueForm: setValue })
          );
        }}
      </FormInput>
    );
  }
}
export default CustomInput;

React.cloneElement(children, { setValueForm: setValue }) 似乎返回一个对象。但如果我只渲染 React.cloneElement 而不使用“FormInput”部分，渲染就可以了。所以，我认为问题出在 FormInput 的功能上。

我做错了什么？

您可以查看FormInput class

谢谢。

Answer 1

看起来您导入错误:https://www.npmjs.com/package/react-form#-forminput-

import { FormInput } from "react-form"

与

相反

import FormInput from "react-form"