React：在 componentDidMount 中获取元素大小

Question

我正在尝试实施

第二步，我需要在我组件的componentDidMount中获取我组件中定义的一个div的大小。 Whosebug 上的许多线程都建议为此目的使用 refs。但是，我很难理解如何实施它。能不能给个代码例子，学习如何在componentDidMount中获取元素挂载后的大小？

Answer 1

您可以使用 createRef 创建一个 ref 并将其存储在一个实例变量中，您将其传递给您想要引用的元素的 ref 属性。

此 ref 将在组件安装后引用 current 属性中的节点。

例子

class App extends React.Component {
  ref = React.createRef();

  componentDidMount() {
    const { current } = this.ref;
    console.log(`${current.offsetWidth}, ${current.offsetHeight}`);
  }

  render() {
    return <div ref={this.ref} style={{ width: 200, height: 200 }} />;
  }
}

ReactDOM.render(<App />, document.getElementById("root"));

<script src="https://unpkg.com/react@16/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.production.min.js"></script>

<div id="root"></div>

Answer 2

通过创建引用，您可以访问所有元素的属性，例如 offsetWidth。

https://developer.mozilla.org/en-US/docs/Web/API/Element

class TodoApp extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
     items: [
       { text: "Learn JavaScript" },
        { text: "Learn React" },
        { text: "Play around in JSFiddle" },
        { text: "Build something awesome" }
      ]
    }
    
    this.myRef = React.createRef();
  }
  
  componentDidMount() {
   console.log(this.myRef.current.offsetWidth);
  }
  
  render() {
    return (
      <div ref={this.myRef}>
        {this.state.items.map((item, key) => (
          <div className="rootContainer" key={key}>
              <div className="item">{item.text}</div>
          </div>
        ))}
      </div>
    )
  }
}

ReactDOM.render(<TodoApp />, document.querySelector("#app"))

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

.rootContainer {
  display: inline-block;
}

.item {
  display: inline-block;
  width: auto;
  height: 100px;
  background: red;
  border: 1px solid green;
}

<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>

<div id="app"></div>

React：在 componentDidMount 中获取元素大小

React: Get element size in componentDidMount

dom

reactjs

react-ref