reactjs - 获取所有子元素的尺寸

Question

我是 React 的新手，我正在寻找编写执行以下操作的组件的最佳方法：

• 创建要渲染的子组件数组
• 渲染这些组件（因为在渲染之前尺寸是未知的）
• 获取每个组件的尺寸
• 在收到所有这些组件尺寸后/任何时候更新这些子尺寸时执行 foo

我到目前为止的解决方案看起来像这样

  constructor() {
    this.state = {
      childDimensions:[]
    }
  } 

  getChildDimension(id, dimensions){
    const newChildDimensions = this.state.childDimensions.slice()
    newChildDimensions[id] = dimensions
    this.setState({'childDimensions': newChildDimensions})

    foo(this.state.childDimensions)
  }

  render(){
    const children = this.props.data.map((element,index)=>{
      return <Child data={element} id={index} getDim={this.getChildDimension}/>
    })
    return (
      <div>
        {children}
      </div>
    )
  }

问题是每次调用 getChildDimensions 时都会调用 foo()，而理想情况下，我只希望它在所有子组件都调用 getChildDimensions 时运行一次。另外我认为每个 setState 调用都忽略/覆盖了其他调用的 getChildDimensions 所做的更改。

理想情况下，我想要一种使用 Promise.all 之类的方法来编写它，一旦从每个子组件接收到一组维度，它将运行 foo()。

标签： reactjs

Answer 1

只有当 this.state.childDimensions 的长度等于 this.props.data 的长度时，您才必须执行 foo ？

  getChildDimension(id, dimensions){
    const newChildDimensions = this.state.childDimensions.slice()
    newChildDimensions[id] = dimensions
    this.setState({'childDimensions': newChildDimensions},(state)=>{
      if(this.props.data.length === state.childDimensions.length){
        foo(state.childDimensions)
      }
    })
  }