javascript - React 获取节点css属性求助

Question

准备写个简单的React Carousel组件。遇到个难点：计算节点的css属性。

  changeVisiableContent(index) {
    let distance = (index - this.state.index) * 270;
    let node = ReactDOM.findDOMNode(this);
    let marginTop = getComputedStyle(ReactDOM.findDOMNode(this)).marginTop;
    node.style.marginTop = (Number.parseInt(marginTop) - distance) + 'px';
    this.setState({index: index});
    // this.props.clickIndex(index);
  }

基本逻辑：点击一下页面上的标签，通过设置marginTop实现轮播。设置marginTop带有动画效果。发现一个bug:
在上一次动画没有完成时，点击标签，getComputedStyle获取的是这个时间点marginTop，导致内容错乱了。

Q1：有没有方法获取动正确的css属性值？
@2：上面的方法是直接操作DOM节点，不符合React的思想，老司机们能分享个更好的实现思路吗？

Answer 1

利用ref.. 给标签加上ref属性（ref="name"）。然后通过this.refs.name 来访问该标签。this.refs.name.style.属性，可以访问。

1. 既然是轮播，那就应该有循环。setInterval

2. 如果你是想通过点击一次标签就轮播一次。那就在轮播的动画执行过程中，肯定要设置标签不能再点击。

Answer 2

使用offsetTop取值