React.js:Refs在初始渲染时不可用

Question

我想在组件的根DOM元素中间放置一个圆圈:

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/

鸡蛋和鸡蛋问题发生在这里:this.refs在第一次渲染时未定义.解决这个问题的最佳方法是什么？我宁愿不引用外部DOM节点(例如document.body).

Answer 1

它不是refs没有定义的,而是你尝试在生成它的同时尝试访问DOM.this.refs.svg.getDOMNode不会返回任何内容,因为组件中没有真正的DOM表示render.

为了保持更多的React-y,我将移动cx到组件的状态并在元素呈现给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>
        );
    }
});