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

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

0 голосов
/ 12 ноября 2018

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

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

Ответы [ 2 ]

0 голосов
/ 12 ноября 2018

Создавая ссылку, вы получаете доступ ко всем свойствам элемента, таким как 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>
0 голосов
/ 12 ноября 2018

Вы можете создать ссылку с помощью 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>
...