我想在组件的根DOM元素中间放置一个圆圈:
var App = React.createClass({ render: function() { return ; }, 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
).
它不是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> ); } });