时间戳

首页 > 解决方案 > 有什么方法可以知道子组件是否已安装在 React 中

reactjs - 有什么方法可以知道子组件是否已安装在 React 中

问题描述

我想知道是否有可能从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>

现在，我不想为每个孩子分配一个 ref 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 />) }
)

标签： reactjsreact-native

解决方案

在您的子组件中：

state = {
  domMounted: false //initial state
}

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

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

在您的父组件中：

this.childRef.state.domMounted

推荐阅读