组件-不能在增强组件中使用子组件

Question

我正试图在我的react应用程序中实现一个更高级的组件。我有一个带有所有普通登录名的基本表单组件&然后我创建了一个ContactForm组件，它封装了这个通用组件。

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

为什么要做出反应引起这个问题&如何解决它，我是不是用错误的方式实现了特定的逻辑？我需要以表单的形式导入这些组件，因为它们自己处理一些逻辑&帮助分离关注点。

下面是通用和特殊组件的代码。

接触式组件

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 } 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

Answer 1

这里一切都很好，

​

const {Component} = React
class Form extends Component {

    render() {
        return (
            <div className="page-form">
                <div className="page-form-fields clearfix">
                    <input type="text" />
                </div>
                <button>Submit</button>
            </div>
        )
    }
}

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

const ContactForm = createForm(Form)

ReactDOM.render(<ContactForm />, document.getElementById("app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app"></div>

​