reactjs - 不能使用 react ref 来动态设置距离

Question

github：https ://github.com/Brent-W-Anderson/shoe_store/tree/main

嗨，我需要帮助正确使用我的反应参考。我正在创建一个图像滑块，并根据图像宽度（基于所有图像共享的高度——这意味着图像之间的宽度不同）将集合中的第一个图像居中。

当我的组件安装时，参考宽度是未定义的（我假设是因为它还没有安装？但我无法弄清楚）。我知道这应该可以工作，因为我在同一个 componentDidMount 函数中设置了一个“resize”事件，并且一旦我去调整窗口大小（或经过一段时间后），那么每个图像的宽度就会完全按照它应该显示是。

在初始页面加载时：

调整窗口大小后：

src > components > shoes > shoe.tsx （魔法发生的地方）

Answer 1

请这样做并让我知道结果。没有构造函数的类可能会有奇怪的行为。还要检查一下：为什么我们写超级道具是因为使用构造函数的原因。

export default class Shoe extends Component<{ shoe: { asset:string, name:string, price:number }, handleShoePos:Function }> {
     // add this 
    constructor(props){ // use some tsx behavior if you want
      super(props);
      this.cardRef = React.createRef<HTMLDivElement>();
    }
    
    componentDidMount() {
        window.addEventListener( 'resize', this.handleResize );

        this.handleResize();
    }

    handleResize = () => {
        const { handleShoePos } = this.props;
        const width = this.cardRef.current?.clientWidth;

        if( width ) {
            handleShoePos( width / 2 );
        }
    }

    render() {
        const { asset, name, price } = this.props.shoe;

        return (
            <div ref={ this.cardRef } className="shoe_card">
                ......
            </div>
        );
    }
}