Реагировать: Получить размер элемента в componentDidMount

Question

Я пытаюсь реализовать решение, представленное в этом ответе.

На втором этапе мне нужно получить размер div определенный в моем компоненте в компоненте componentDidMount. Многие потоки в Stackru предлагают использовать для этой цели ссылки. Однако мне сложно понять, как это реализовать. Не могли бы вы дать мне пример кода, чтобы узнать, как получить размер элемента после его монтирования в componentDidMount?

Answer 1

Вы можете создать ссылку с createRefи сохранить его в переменной экземпляра, которую вы передаете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>