React如何获取DOM元素的样式？

Question

想要通过ref或者findDOMNode方式获取样式，但是取出来的都是空值

import React from 'react'
import ReactDOM from 'react-dom'
import style from './index.css'
import SplitPanel from '../SplitPanel/index.jsx'

class Main extends React.Component {
  componentDidMount () {
    const dom = ReactDOM.findDOMNode(this)
    console.log('this style:', dom.style)
    console.log('input style:', this.textInput.style)
  }

  render () {
    return (
      <div className={style.wrapper} >
        <input type="text"
          ref={(input) => { this.textInput = input }} />
      </div>
    )
  }
}

export default Main

在CodePen中测试

结果：

Answer 1

知道了，dom.style得到的是行内样式，要用dom.currentStyle或者getComputedStyle(dom, null)取值。

Answer 2

生命周期不对，应该在componentDidUpdate 里面获取

Answer 3

this.textInput.style只能获取dom行内的样式，行内如果没写样式的话，就是空的