javascript - addComponentAsRefTo(...) : Only a ReactOwner can have refs - Error in Form with Select List

Question

我有一个在 React 中内置的选择列表，它工作正常，但我不断从 React 中收到错误。我在缩小模式下遇到更多错误，情况更糟。我被定向到 Facebook 链接 https://facebook.github.io/react/docs/error-decoder.html?invariant=119和 https://facebook.github.io/react/docs/error-decoder.html?invariant=120但那里的选项都没有真正帮助我。

我查看了我引用的库，没有发现 React 的重复加载(它是在页面上加载的 CDN 并由 Browserify/Browserify-shim 外部化 - 我已经浏览了 bundle 以查找 React 代码，但还没有找到了。)我通过在页面上注释掉 React 进行了双重检查，一切都尽职尽责地折叠了(如预期的那样)，所以我确信它与我的代码以某种方式相关。

根组件看起来像这样...

export default class Select extends React.Component {

    constructor(props) {
        super(props)

        this.state = { 
            value: this.props.value || ""
        }

        this.handleSelectChange = this.handleSelectChange.bind(this)
        this.clearValue = this.clearValue.bind(this)
    }

    handleSelectChange(e) {
        this.state.value = e.target.value
        this.props.onChange(e)
    }

    clearValue() {
        this.setState({ value: this.props.defaultValue })
        this.forceUpdate()
    }

    render() {
        const optionNodes = this.props.options.map((obj, index) => {
            return <ListItem
                key = {index.toString()}
                data = {obj}
                currentSelectedValue = {this.state.value} />
        })
        return (
            <select 
                className = "form-control drop-down" 
                id = {this.props.name}
                name = {this.props.name} 
                onChange = {this.handleSelectChange} 
                disabled = {this.props.disabled}
                value = {this.state.value}>
                {this.state.value == this.props.defaultValue && 
                    <option 
                        id = {`${this.props.name}-placeholder`} 
                        className = "placeholder" 
                        value = {this.props.defaultValue} disabled hidden>
                        {this.props.placeholder}
                    </option>}
                {optionNodes}
            </select>
        )
    }
}

这里由更高的组件使用......

export default class SelectFormLine extends React.Component {

    constructor(props) {
        super(props)

        this.clearValue = this.clearValue.bind(this)
    }

    clearValue() {
        this.refs.selectList.clearValue()
    }

    render() {
        return (
            <div className="row padded-row">
                <div className="drop-down-line form-group">
                    <FormLabel
                        name = {this.props.name}
                        className = {this.props.labelClassName} 
                        value = {this.props.label} />
                    <div className={this.props.inputClassName}>
                        <Select
                            name = {this.props.name} 
                            ref = "selectList"
                            placeholder = {this.props.placeholder}
                            onChange = {this.props.onChange}
                            value = {this.props.value}
                            defaultValue = {this.props.defaultValue}
                            disabled = {this.props.disabled}
                            options = {this.props.options} />
                        <FormInputNotes>{this.props.children}</FormInputNotes>
                    </div>
                </div>
            </div>
        )
    }
}

它位于我的表单中(片段)...

导出默认类 UserManagementForm 扩展 React.Component {

constructor(props) {
    super(props)

    this.state = { 
        organisationsDisabled: true,
        typesLookupData: [],
        organisationsLookupData: []
    }

    this.handleTypeChange = this.handleTypeChange.bind(this)
}

handleTypeChange(e) {
    const changedUser = this.props.object
    changedUser.role = e.target.value
    this.refs.organisationIdSelect.clearValue()
    changedUser.organisationId = ""
    this.setState({ organisationsDisabled: false })
    this.props.onChange(changedUser)
    this.loadOrganisationsLookupData(changedUser.role)
}

render() {
    const labelClassNames = "col-md-2 col-sm-4"
    const inputClassNames = "col-md-10 col-sm-8"
    return (
        <InlineContent useFor = {this.props.useFor}>
            <Form.Wrapper
                formId = {this.props.formId}
                object = {this.props.object}
                className = "col-md-12"
                onSubmit = {this.props.onSubmit}
                onSubmitSuccess = {this.props.onSubmitSuccess}>
                {this.props.object.id !== undefined && <Form.Hidden name = "ID" value = {this.props.object.id} />}
                <Form.ErrorDisplay />
                {this.props.managed && this.props.useFor == "create" && <Form.SelectLine
                    name = "OrganisationId"
                    ref = "organisationIdSelect"
                    label = "Organisation"
                    labelClassName = {labelClassNames} 
                    inputClassName = {inputClassNames} 
                    placeholder = "Please select an organisation&hellip;"
                    onChange = {this.handleOrganisationChange}
                    value = {this.props.object.organisationId}
                    disabled = {this.state.organisationsDisabled}
                    options = {this.state.organisationsLookupData} /> }
                {!this.props.managed || this.props.useFor == "edit" && <Form.Hidden name = "OrganisationId" value = {this.props.object.organisationId} />}
                <Form.Buttons.SubmitCancel
                    className = {`${inputClassNames} col-md-offset-2 col-sm-offset-4`} 
                    submitText = {this.props.submitText} 
                    onCancel = {this.props.onCancel} />
            </Form.Wrapper>
        </InlineContent>
    )
}

}

Answer 1

这个错误很奇怪。

我通过将字符串引用更改为 Facebook 所说的开始使用的内容来解决这个问题。 https://facebook.github.io/react/docs/refs-and-the-dom.html

所以基本上你想做

ref={(i) => this._whateverYouWantToCallIt = i}

如果这不能解决问题，您的项目中可能存在双重 React。