html - 如何在 React JS 中获取 html 元素的宽度？

Question

我需要使用 React JS 获取 html 元素的宽度。当我这样做时 console.log(this.widthPromoLine)在 componentDidMount() ，它有效，但是当我这样做时 this.setState({moveContent: this.widthPromoLine}) ，它没有。

import React from 'react'
import './index.css'

class Promo extends React.Component {


    constructor(props){
        super(props)
        this.state = {
            moveContent: 0
        }
    }
    
    componentDidMount(){
        this.setState({moveContent: this.widthPromoLine})
    }
    
    render(){
      return <div 
                className="promo-content" 
                ref={promoLine => this.widthPromoLine = promoLine.clientWidth}> 
             </div>
    }


}

.promo-content {
  width: 1870px;
}

Answer 1

访问 clientWidth在将 ref 分配给变量 this.widthPromoLine 之后在 componentDidMount然后像下面这样设置。还有 setState是异步的，所以你需要在 setState 的回调中状态更新后做任何事情.

import React from "react";
import "./styles.css";

class Promo extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      moveContent: 0
    };
  }

  componentDidMount() {
    this.setState({ moveContent: this.widthPromoLine.clientWidth }, () => {
      console.log(this.state);
    });
  }

  render() {
    return (
      <div
        className="promo-content"
        ref={promoLine => (this.widthPromoLine = promoLine)}
      />
    );
  }
}

希望这可以帮助 !