使用react-form嵌套組件react.cloneElement

我想修復此庫的問題：react-form。有關信息，這是我目前的錯誤：使用react-form嵌套組件react.cloneElement

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>

這是我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}）似乎返回一個對象。但是，如果我只渲染沒有「FormInput」部分的React.cloneElement，則渲染是可以的。所以，我想這個問題來自FormInput的功能。

我做錯了什麼？

可以檢查FormInput class

感謝。

來源

2017-08-10 Jean-louis Gouwy

你能解釋一下究竟是什麼你試圖完成什麼有？ – Dekel

@Dekel通過編寫^^解釋起來非常複雜。我的最後一點是：我不想寫在每個組件（使用表格），「 blablabla」...我寧願只是有的方式。首先更具可讀性。其次，在FormInput的每個子組件（在本例中爲：datepicker）中，我需要爲當前表單的每個字段設置一個默認值。所以，相反，每一次，寫這個，我想要一個更具可讀性的大表單組件。 –

看起來要導入錯誤：https://www.npmjs.com/package/react-form#-forminput-

import { FormInput } from "react-form"

，而不是

import FormInput from "react-form"

來源

2017-08-10 21:33:00

哦，小子，對！我覺得很愚蠢...幾個小時後，發現它爲什麼不工作！ –

哈哈很樂意幫忙。接受答案，如果它的工作！ –

是的，看起來不錯，但已經很晚了，我明天早上要嘗試一個新鮮的頭^^，我回來它工作^^ –

使用react-form嵌套組件react.cloneElement

回答

相關問題