reactjs - React：在 componentDidMount 中获取元素大小

Question

我正在尝试实施此答案中提供的解决方案。

在第二步中，我需要div在我的组件的componentDidMount 中获取我的组件中定义的大小。StackOverflow 上的许多线程都建议为此使用refs 。但是，我很难理解如何实现它。请给我一段代码作为示例，以了解如何在将元素挂载到 componentDidMount 后获取元素的大小？

Answer 1

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

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

例子

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

通过创建 ref，您可以访问所有元素的属性，例如 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>