Question

我有一个React应用程序，该应用程序经常使用地图，要使其正确渲染，我需要以像素为单位传递“硬”宽度和高度。我将其容器作为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”，还是在反应世界中皱眉？我尝试过像“反应容器尺寸”之类的库，但是只接受一个孩子，我将有两个孩子，因为一个是覆盖层。 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元素，并且窗口调整大小事件使用DOM元素之一的宽度和高度来更新状态：

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

如果它不能回答您的问题，请提供有关您的情况的更简洁的信息，以及可能减少的实时样本。

编辑

根据您的Codepen示例，有两种选择。

一种方法是使用HOC并使用您的父母进行参考转发：

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>
    );
    }
}

除非您必须将其作为道具传递给父级，然后将父级尺寸（您感兴趣的尺寸）传递给子级组件，否则在父级渲染方法中基本上使用子级组件。此代码没有比使用子组件作为父组件的副作用更多的副作用，因为更新是相同的。

得到反应Flexbox孩子的像素尺寸？

1 个答案: