0

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

问题是我的页面变得无响应并在我尝试运行它时给出最大堆栈超出错误。经过一番研究，我发现问题是在通用表单组件的渲染方法中调用了一些自定义组件。但这与我在 app 中随处使用的语法相同。

为什么反应导致这个问题以及如何解决它，我是否以错误的方式实现 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 } 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
4

1 回答 1

0

这里运行良好，

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>

于 2017-06-30T06:19:26.230 回答