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

Question

I have a Select list that I have built in React and it works fine but I keep getting errors from React. I get more errors in Minified mode which is even worse. I have been directed to a Facebook link at https://facebook.github.io/react/docs/error-decoder.html?invariant=119 and https://facebook.github.io/react/docs/error-decoder.html?invariant=120 but none of the options there have really helped me.

I have looked through my referenced libraries and can find no duplicate loading of React (It is CDN loaded on the page and externalised by Browserify / Browserify-shim - I have gone through the bundles looking for the React code and haven't found it.) I double checked by commenting out React on my page and everything dutifully fell over (as expected), so I am down to it being related to my code somehow.

The root component looks like this...

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

This is used by a higher component here...

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

Which sits inside my form here (snippet)...

export default class UserManagementForm extends 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

This error is weird.

I've gotten by it by just changing string refs to what Facebook has said to start using. https://facebook.github.io/react/docs/refs-and-the-dom.html

So basically you want to do

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

If that doesn't fix it, there may be a double React on your project.