addComponentAsRefTo（…）：只有ReactOwner可以拥有refs-选择列表形式的错误

Question

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

我浏览了我引用的库，找不到重复的React加载（它是CDN加载到页面上，并由Browserify / Browserify-shim外部化-我遍历了所有捆绑包，寻找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。