获取反应 flexbox child 的像素尺寸？

Question

我有一个经常使用地图的 React 应用程序，为了让它们正确呈现，我需要传入 "hard" 宽度和高度（以像素为单位）。我将它的容器作为 flexbox，因此它的尺寸在渲染时会根据设备、方向等而有所不同。

所以问题是 - 如何在运行时找出容器框的计算宽度和高度，以便我可以将其传递给内部地图？

例如：

<Column className="no-pad">
   <WalkingMap 
       isShowing={true} 
       height={this.state.mapHeight}   <-- want to pass this
       width={this.state.mapWidth}     <-- and this
   />
   <there is another sibling 'overlay' component here too>
</Column>

我可以只抓住 "getElementbyId" 还是在 React 世界中不受欢迎？我已经尝试过像 'react-container-dimensions' 这样的库，但它只接受一个 child，我将有两个 children，因为一个是覆盖层。 Column 组件并不总是一列，更像是一个可以自行调整的 flexbox。我试过 React.createRef 但无法让它在 flexbox 上工作 - 它总是返回未定义。任何帮助表示赞赏。

Answer 1

您应该尝试 ref 回调。

class App extends Component {

    constructor(){
        super();
        this.myElement = null;
    }

    render(){
        return <div className="container">
            <div className="child" ref={ e => this.myElement = e }>
            </div>
        </div>;
    }

}

这是两个 flex 元素的极其简化的示例，window 调整大小事件使用 DOM 元素之一的宽度和高度更新状态：

https://codepen.io/rhernando/pen/caa3b5fc148590c345fd6f9b06c85437?editors=0110

如果它不能回答您的问题，请提供有关您的场景的更简洁的信息，也许还可以提供简化的实时样本。

编辑

根据您的代码笔示例，有两个选项。

一种是使用 HOC 并使用你的 parent 和 ref 转发：

https://reactjs.org/docs/forwarding-refs.html

二、就是使用这段代码：

class Child extends Component {
  render() {
    return (
      <div className="child">
        <h4>Here's my dimensions</h4>
        <pre>{JSON.stringify(this.props, null, 2)}</pre>
      </div>
    );
  }
}

class Parent extends Component {
  constructor(){
    super();
    this.state = {
      width: 0, height: 0
    };
    this.container = null;
  }

  componentDidMount(){
    window.onresize = () => {
            this.setState({
                width: this.container.clientWidth,
                height: this.container.clientHeight,
            });
        };
    this.setState({
      width: this.container.clientWidth,
      height: this.container.clientHeight,
    });
  }

  render() {
    const { width, height } = this.state;
    return (
      <div className="parent" ref={ e => this.container = e }>
        <Child dimensions={{width, height}} />
      </div>
    );
  }
}


class App extends Component {
    render(){
        return (
      <div className="container">
        <Parent />
        </div>
    );
    }
}

基本上在 parent 渲染方法中使用 child 组件，除非您必须将其作为道具传递给 parent，然后传递 parent 维度（那些是您感兴趣的）到 child 组件。这段代码没有比使用 child 组件作为 parent 组件的代码更多的副作用，因为更新是相同的。

获取反应 flexbox child 的像素尺寸？

getting pixel dimensions of react flexbox child?

reactjs

react-dom