Question

我正在尝试在我的反应应用中实现更高阶的组件。我有一个基本表单组件，所有通用登录，＆amp;然后我创建了一个ContactForm组件，它包装了这个通用组件。

问题是我的网页变得反应迟钝了当我尝试运行它时，给出最大堆栈超出错误。经过一些研究后，我发现问题是在一般表单组件的render方法中调用一些自定义组件。但这与我在app中随处可用的语法相同。

为什么反应导致这个问题＆amp;如何解决它，我是否以错误的方式实现HOC逻辑？我需要在Form中导入这些组件，因为它们自己处理一些逻辑。帮助解决问题。

下面是一般和＆amp;的代码。 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 } 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>

React Hight Order Component - 无法在增强组件中使用子组件

1 个答案: