Question

无论如何都要获得React组件子元素的宽度。我有没有名称Container的包装器组件，我将Component1的子类型从Component1添加到它。见下面的例子。我想知道是否有办法在Container安装时获取每个div子节点的宽度。

更新说明： 我试图获得容器子宽度的原因是我可以根据子项总数动态设置容器宽度。通过将容器宽度设置为子宽度的数量，我可以允许一些我想要的水平滚动效果。

组件1

export default class Component1 extends Component{
render(){
  return(
    <Container>
        <div className="large-box"/>
        <div className="large-box-dark"/>
    </Container>
  )
 }
}

现在我的容器组件。

    export default class Container extends Component{
      componentDidMount(){
        this.props.children.forEach(( el ) => {
        // get each child's width 
        console.log("el  =", el);
      });
      }


  render() {
    return (
      <div className="scroller" ref={(scroller) => { this.scroller = scroller }}>
        {this.props.children}
      </div>
    )
  }
 }

Answer 1

您可以使用refs。虽然除非没有别的办法，否则你应该避免触摸DOM。但是我们走了。

为您的子组件提供一个ref，它是React提供的逃逸舱口，用于访问DOM（在此之前警告使用其他方法）。

子组件

class ChildComp extends Component {
  getWidth = () => {
     //Access the node here and get the width
     return this.childNode.offsetWidth(); //or clientWidth();
  } 
  render() {
     return (
       <div ref={(r) => {this.childNode = r}}>
       </div>
     );
  }
}

父组件：

class ParentComp extends Component {
  componentDidMount() {
     //Access the child component function from here
     this.childComponent.getWidth();
  }
  render() {
     return (
       <ChildComp 
          ref={(r) => {this.childComponent = r}} />
     );
  }
}

但是当没有办法以声明方式完成任务时，请记住使用上面的方法。

Answer 2

我认为技术上似乎不可能。 JSX

<div className="large-box"/>

不引用DOM元素（它在呈现后具有宽度），而是引用React元素，它是一个内存中对象，描述如何生成 DOM元件。由于React元素没有呈现或甚至连接到浏览器中的实际DOM，因此无法知道宽度。

请记住，React可以在服务器上呈现 - 服务器无法知道不同计算机上的浏览器将显示什么。

我也反映了Pedro Nascimento所说的 - 这个解决方案可能最好用其他方式解决，但没有背景，很难帮助。

Answer 3

然后尝试获取“DivColorOpacy”的引用！并把你想要的任何东西放在父母身上并限制你的行为。这很愚蠢，但可以完成工作。

用这个css

.DivColorOpacy{
  height: max-content;
  width: max-content;
  position: relative;
}

import { Component } from "react";
import * as React from "react";


interface DivColorOpacyProps {
    backgroundColor: string,
    opacity: number,
}
export class DivColorOpacy extends Component<DivColorOpacyProps, any>{
    componentDidMount(){

    }
    render() {
        const { backgroundColor, opacity } = this.props;
        return <div className="DivColorOpacy">
            {this.props.children}
            <div style={{
                position: "absolute",
                zIndex: -1,
                backgroundColor,
                opacity,
                width: "100%",
                height: "100%",
                top:0
            }} />
            
        </div>
    }
}

反应props.children宽度

3 个答案: