How Refs works on react 0.14

Question

I'm using a subrender approach (split the react component creation in a helpers methods) on my React 0.13 App like this. But I got an error:

Invariant Violation: addComponentAsRefTo(...): Only a ReactOwner can have refs. You might be adding a ref to a component that was not created inside a component's render method

So, how can manage my on the fly created react components that depend on the DOM to avoid to get fat my primary render method?

Any clue how to refactor that to the new approach in the 0.14 React version?

module.exports = React.createClass({
displayName: 'Typed',
render: function() {
    var _this = this;

    return (
      React.createElement("div", {
            style: {
                position: 'relative'
            },
            className: 'react-typeahead-container ' + _this.props.className},
        _this._renderInput(),
        _this._renderDropdown(),
        _this._renderAriaMessageForOptions(),
        _this._renderAriaMessageForIncomingOptions()
      )
    );
},
_renderInput: function() {
    var _this = this,
        state = _this.state,
        props = _this.props,
        inputValue = props.inputValue,
        inputValue = props.inputValue,
        className = 'react-typeahead-input',
        inputDirection = getTextDirection(inputValue);

    return (
        React.createElement("div", {
            style: {
                position: 'relative'
            },
            className: "react-typeahead-input-container"},
            React.createElement(Input, {
                ref: "input", //this does not works :(
                role: "combobox"
            )
        )
    );
},

Sure bro, React module it was required before , but thank you — OsDev, Nov 03 '15 at 20:53
I didnt face with it but [here](http://stackoverflow.com/questions/28519287/what-does-only-a-reactowner-can-have-refs-mean) is the similar problem. I hope it will help you — The Reason, Nov 03 '15 at 21:03

score 2 · Answer 1 · answered Dec 29 '15 at 23:16

As this JSFiddle shows, the code you have above works (modified slightly so that it runs as written). There is a minor syntax error; the object containing the properties is missing a closing curly brace:

React.createElement(Input, {
    ref: "input", //this does not works :(
    role: "combobox"
) // <-- should be })

score 1 · Answer 2 · answered Dec 29 '15 at 23:04

1

From my understanding, ref should be a callback method that receives the referenced element. In this case, input. You can then store it in state or someone else and reference it. When it's valid, the referenced DOM node will have rendered.

answered Dec 29 '15 at 23:04

Interactive Llama

780
4
10

This was introduced in 0.13, and is optional. String-based refs should still work (at least for `createClass` based components) – Michelle Tilley Dec 29 '15 at 23:08

How Refs works on react 0.14

2 Answers2