编辑：

Question

我想知道是否有可能从this.props.children中找出是否已经挂载了特定的孩子？

之所以这样问，是因为我想创建一个包装器组件，该组件将处理某种异步渲染（特别是对react-native而言），并一个接一个地渲染子级。只是想知道如何使用简单的包装器组件来实现。

任何帮助将不胜感激。

编辑：

仅描述更多预期结果。假设我有一个类似的渲染方法

<View>
  <Text>I'm a string</Text>
  <View>
    <Image />
    <Image />
    <Image />
    <Image />
  </View>
  <View>
    <View />
    <View />
  </View>
</View>

我想创建一个包装器，该包装器将异步渲染每个块并具有类似的内容

<ASyncRenderWrapper>
  <Text>I'm a string</Text>
  <View>
    <Image />
    <Image />
    <Image />
    <Image />
  </View>
  <View>
    <View />
    <View />
  </View>
</ASyncRenderWrapper>

现在，我不想给每个孩子分配一个引用，而是要遍历this.props.children并逐个渲染它们，但是要渲染下一个孩子，我必须知道前一个孩子已经安装。

一些伪代码来说明我认为包装器组件应该是什么样子

state = {
  childRenderList: Array.apply(null, Array(props.children.length)).map(() => false),
}
refCounter = 0
componentDidMount() {
  this.startAsyncRender()
}
startAsyncRender = () => {

  if (children[refCounter]) {

    //      Somehow figure out if the previous child has been mounted to know if this one can be allowed to mount
    //      Alternativly I guess I could just skip a render cycle with setTimeout

    childRenderList = childRenderList[refCounter] = true;
    this.setState({ childRenderList: childRenderList });

    if (children[refCounter + 1]) {
      this.startAsyncRender();
      this.refCounter++
    }
  }
}
canRender = (index) => {
  return childRenderList[index];
}
return (
  { children.map((Child, index) => canRender(index) && <Child />) }
)

Answer 1

在您的子组件中：

state = {
  domMounted: false //initial state
}

componentDidMount() {
  this.setState({domMounted: true})
}

<Child ref={(childRef) => {this.childRef = childRef} />

在您的父组件中：

this.childRef.state.domMounted

有没有办法知道子组件是否已安装在React

编辑：

1 个答案: