javascript - react - using this refs is deprecated




React.js: Refs no están disponibles en el procesamiento inicial (2)

Estoy tratando de posicionar un círculo en el medio del elemento DOM raíz del componente:

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/

El problema de la gallina y el huevo tiene lugar aquí: this.refs no está definido en el primer procesamiento. ¿Cuál es la mejor manera de resolver esto? Preferiría no hacer referencia a nodos DOM externos (como document.body ).


No es que los refs no estén definidos, es que estás tratando de acceder al DOM al mismo tiempo que intentas generarlo. this.refs.svg.getDOMNode no devolverá nada porque el componente no tiene una representación DOM real en el render .

Para mantener esto más React-y, movería cx al estado del componente y lo actualizaría después de que el elemento se haya renderizado al 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>
        );
    }
});

Una forma estrafalaria de resolver este problema es devolver un valor ficticio cuando aún no está insertado en el DOM y cuando lo está (utilizando componentDidMount) y luego volver a dibujar el elemento.

    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/





reactjs