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之类的东西编写代码的方法。一旦从每个子组件接收到一组尺寸，它们都将运行foo（）。

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

获取所有子元素的尺寸

1 个答案: