Javascript 反应高阶组件-不能在增强组件中使用子组件

我正在尝试在我的react应用程序中实现一个更高阶的组件。我有一个包含所有常规登录的基本表单组件，然后我制作了一个ContactForm组件来包装这个常规组件

问题是我的页面没有响应&当我尝试运行它时，给出最大堆栈超出错误。经过一些研究，我发现问题是在通用表单组件的呈现方法中调用一些自定义组件。但这和我在应用程序中随处使用的语法是一样的

为什么会导致这个问题&如何解决它，我是否以错误的方式实现了HOC逻辑？我需要在表单中导入这些组件，因为它们自己处理一些逻辑&帮助分离关注点

下面是通用和HOC组件的代码

联系人表单组件

import React, { Component } from 'react'
import Form from './form'

const createForm = FormComponent =>
    class extends Component {
        render() {
            return <FormComponent {...this.props} />
        }
    }

const ContactForm = createForm(Form)

export default ContactForm

import React, { Component } from 'react'
import InputText from './input-text'
import SubmitButton from './submit'

class Form extends Component {

    render() {
        return (
            <div className="page-form">
                <div className="page-form-fields clearfix">
                    <InputText/>
                </div>
                <SubmitButton />
            </div>
        )
    }
}

export default Form

class InputText extends Component {
    render() {
        const { type, icon, label, name, placeholder, maxlength, value, disabled, error, errorText } = this.props
        return (
            <div className={`finput ${label && 'labeled'} ${error ? 'has-error' : ''}`}>
                <input
                    type={type || 'text'}
                    name={name}
                    className={`textfield w-input ${error ? 'has-error' : ''}`}
                    maxLength={maxlength}
                    placeholder={placeholder}
                    value={value}
                    disabled={disabled}
                    onChange={e => this.props.onChange(e)}
                    onBlur={e => this.props.onBlur && this.props.onBlur(e)}
                />
                <label className="fip-label">
                    {label}
                </label>
                {error &&
                    <span className={`fip-info ${error && 'error'}`}>
                        {errorText}
                    </span>}
                {icon && <i className={`icon icon-${icon}`} />}
            </div>
        )
    }
}

import React，{Component}来自“React”
从“./Form”导入表单
const createForm=FormComponent=>
类扩展组件{
render（）{
返回
}
}
const ContactForm=createForm（表单）
导出默认联系人表单

基本表单组件

import React, { Component } from 'react'
import Form from './form'

const createForm = FormComponent =>
    class extends Component {
        render() {
            return <FormComponent {...this.props} />
        }
    }

const ContactForm = createForm(Form)

export default ContactForm

import React, { Component } from 'react'
import InputText from './input-text'
import SubmitButton from './submit'

class Form extends Component {

    render() {
        return (
            <div className="page-form">
                <div className="page-form-fields clearfix">
                    <InputText/>
                </div>
                <SubmitButton />
            </div>
        )
    }
}

export default Form

class InputText extends Component {
    render() {
        const { type, icon, label, name, placeholder, maxlength, value, disabled, error, errorText } = this.props
        return (
            <div className={`finput ${label && 'labeled'} ${error ? 'has-error' : ''}`}>
                <input
                    type={type || 'text'}
                    name={name}
                    className={`textfield w-input ${error ? 'has-error' : ''}`}
                    maxLength={maxlength}
                    placeholder={placeholder}
                    value={value}
                    disabled={disabled}
                    onChange={e => this.props.onChange(e)}
                    onBlur={e => this.props.onBlur && this.props.onBlur(e)}
                />
                <label className="fip-label">
                    {label}
                </label>
                {error &&
                    <span className={`fip-info ${error && 'error'}`}>
                        {errorText}
                    </span>}
                {icon && <i className={`icon icon-${icon}`} />}
            </div>
        )
    }
}

import React，{Component}来自“React”
从“./input text”导入InputText
从“./submit”导入提交按钮
类形式扩展组件{
render（）{
返回(
)
}
}
导出默认表单

输入文本

import React, { Component } from 'react'
import Form from './form'

const createForm = FormComponent =>
    class extends Component {
        render() {
            return <FormComponent {...this.props} />
        }
    }

const ContactForm = createForm(Form)

export default ContactForm

import React, { Component } from 'react'
import InputText from './input-text'
import SubmitButton from './submit'

class Form extends Component {

    render() {
        return (
            <div className="page-form">
                <div className="page-form-fields clearfix">
                    <InputText/>
                </div>
                <SubmitButton />
            </div>
        )
    }
}

export default Form

class InputText extends Component {
    render() {
        const { type, icon, label, name, placeholder, maxlength, value, disabled, error, errorText } = this.props
        return (
            <div className={`finput ${label && 'labeled'} ${error ? 'has-error' : ''}`}>
                <input
                    type={type || 'text'}
                    name={name}
                    className={`textfield w-input ${error ? 'has-error' : ''}`}
                    maxLength={maxlength}
                    placeholder={placeholder}
                    value={value}
                    disabled={disabled}
                    onChange={e => this.props.onChange(e)}
                    onBlur={e => this.props.onBlur && this.props.onBlur(e)}
                />
                <label className="fip-label">
                    {label}
                </label>
                {error &&
                    <span className={`fip-info ${error && 'error'}`}>
                        {errorText}
                    </span>}
                {icon && <i className={`icon icon-${icon}`} />}
            </div>
        )
    }
}

类InputText扩展组件{
render（）{
const{type，icon，label，name，placeholder，maxlength，value，disabled，error，errorText}=this.props
返回(
this.props.onChange（e）}
onBlur={e=>this.props.onBlur&&this.props.onBlur（e）}
/>
{label}
{错误&&
{errorText}
}
{图标&&}
)
}
}

提交按钮

import React, { Component } from 'react'

class SubmitButton extends Component {
    render() {
        const { response, pending } = this.props
        return (
            <div className="page-form-submit tright half-top-margin">
                {response &&
                    <h4>
                        {response}
                    </h4>}
                <button type="button" className="btn" onClick={e => this.props.onSubmit()} disabled={pending}>
                    Submit
                </button>
            </div>
        )
    }
}

export default SubmitButton

import React，{Component}来自“React”
类SubmitButton扩展组件{
render（）{
const{response，pending}=this.props
返回(
{响应&&
{response}
}
this.props.onSubmit（）}已禁用={pending}>
提交
)
}
}
导出默认提交按钮

它在这里运行良好

const{Component}=React
类形式扩展组件{
render（）{
返回(
提交
)
}
}
const createForm=FormComponent=>
类扩展组件{
render（）{
返回
}
}
const ContactForm=createForm（表单）
ReactDOM.render（，document.getElementById（“app”））

是的，当我使用本机HTML元素时，它运行良好，但当我使用导入的元素时，它以某种方式进入无限循环@Demonofthematics所以你的

元素可能有问题

你能同时显示InputText和SubmitButton组件吗？@MayankShukla编辑