Question

I’m tying to position a circle in the middle of the component’s root DOM element:

var App = React.createClass({
    render: function() {
        return <svg ref="svg">
            <circle r="9" cx={this.centerX()} cy="15"/>
        </svg>;
    },
    centerX: function() {
        var svg = this.refs.svg.getDOMNode();
        return svg.offsetLeft + Math.round(svg.offsetWidth / 2);
    }
});

http://jsfiddle.net/NV/94tCQ/

Chicken-and-egg problem takes place here: this.refs is undefined on the first render. What’s the best way to solve this it? I would prefer not to reference external DOM nodes (such as document.body).

Était-ce utile?

La solution

It's not that refs isn't defined, it's that you're trying to access the DOM at the same time you are trying to generate it. this.refs.svg.getDOMNode will not return anything because the component has no real DOM representation in render.

To keep this more React-y, I would move cx to the component's state and update it after the element has been rendered to the DOM:

var App = React.createClass({
    componentDidMount: function() {
        var svg = this.refs.svg.getDOMNode();
        this.setState({
            cx: svg.offsetLeft + Math.round(svg.offsetWidth / 2)
        });
    },
    getInitialState: {
        return {
            cx: 0
        };
    },
    render: function() {
        return (
            <svg ref="svg">
                <circle r="9" cx={this.state.cx} cy="15" />
            </svg>
        );
    }
});

Autres conseils

A hacky way to solve this issue is to return a dummy value when it is not inserted in the DOM yet and when it is (using componentDidMount) then re-draw the element.

    centerX: function() {
        if (!this.refs || !this.refs.svg) {
            return 0;
        }
        var svg = this.refs.svg.getDOMNode();
        return svg.offsetLeft + Math.round(svg.offsetWidth / 2);
    },
    componentDidMount: function() {
        this.forceUpdate();
    }

http://jsfiddle.net/vjeux/94tCQ/4/

Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top