Question

我正在尝试实现the solution provided in this answer.

第二步，我需要在组件的componentDidMount中获取在组件中定义的div的大小。为此，StackOverflow上的许多线程都建议使用refs。但是，我很难理解如何实现它。您能否给我一些代码作为示例，以学习如何将元素安装在componentDidMount中后获得其大小？

Answer 1

您可以使用createRef创建引用，并将其存储在实例变量中，然后将其传递给要引用的元素的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中获取元素大小

2 个答案: