React 怎么在组件中获取组件本身的 Position?

Question

我想要组件的 position 信息,或者是 props.children 的 position 信息应该怎么操作?

import getElementPosition from 'fbjs/lib/getElementPosition'

export default class Temp extends Component {

    componentDidMount(){
       console.log( getElementPosition(findDOMNode(this)))//不管用
    }

    render () {
        return <div>233</div>
    }
}

Answer 1

<div ref="findGoal">233</div>

然后你就可以通过this.refs.findGoal获取到这个div DOM了，然后去调用你自己的方法

Answer 2

可以参考React Refs/DOM

Answer 3

文档中描述很清楚，链接参考楼上。下面是文档原文

子节点上暴露一个特殊的属性。子节点将会获得一个函数属性，并将其作为 ref 属性附加到 DOM 节点。这允许父代通过中间件将 ref 回调给子代的 DOM 节点。适用于类组件和函数式组件。

function CustomTextInput(props) {
  return (
    <div>
      <input ref={props.inputRef} />
    </div>
  );
}

class Parent extends React.Component {
  render() {
    return (
      <CustomTextInput
        inputRef={el => this.inputElement = el}
      />
    );
  }
}