Reactjs 如何在另一个组件渲染后渲染一个React本机组件？

假设我有两个组件

A

和

B

。我想渲染组件

A

，然后渲染组件

B

。为了使这一点更加明显，我还想在呈现

A

和

B

之间设置一些延迟（比如2秒）。最好的方法是什么？我想我应该在

A

的

组件didmount

中触发

B

的呈现，但我真的不知道如何触发

---

谢谢：）

在componentDidMount中使用setTimeout

这是一个样本

constructor(props){
    super(props);
    this.state={
        isBVisible:false
    };
}

componentDidMount(){
    setTimeout(() => {
        this.setState({isBVisible:true});
    }, 2000);
}

render(){
    return(<View>
        <View style={{width:100,height:100,backgroundColor:"red"}}/>
        {this.state.isBVisible ? <View style={{width:100,height:100,backgroundColor:"green"}}/>:null}
    </View>)
}

构造函数（道具）{
超级（道具）；
这个州={
isBVisible:false
};
}
componentDidMount（）{
设置超时（（）=>{
this.setState（{isBVisible:true}）；
}, 2000);
}
render（）{
返回(
{this.state.isBVisible？：null}
)
}

您的问题非常模糊，可能需要多次实施。 以下是我的看法：

export default class App extends Component {
  constructor() {
    super()
    this.state = { displayComponentB: false }
    this.displayComponentB = this.displayComponentB.bind(this)
  }
  displayComponentB() {
    setTimeout(() => {
      this.setState({ displayComponentB: true })
    }, 2000) // delay
  }
  render() {
    return (
      <View style={styles.container}>
        <ComponentA onComponentDidMount={this.displayComponentB}/>
        {
          this.state.displayComponentB && 
          <ComponentB />
        }
      </View>
    );
  }
}

export class ComponentA extends Component {
  componentDidMount() {
    this.props.onComponentDidMount && this.props.onComponentDidMount()
  }
  render() {
    return (
      <View style={[styles.component, styles.componentA]}>
        <Text style={styles.text}>Component A</Text>
      </View>
    );
  }
}

导出默认类应用程序扩展组件{
构造函数（）{
超级（）
this.state={displayComponentB:false}
this.displayComponentB=this.displayComponentB.bind（this）
}
displayComponentB（）{
设置超时（（）=>{
this.setState（{displayComponentB:true}）
}，2000）//延迟
}
render（）{
返回(
{
this.state.displayComponentB&&
}
);
}
}
导出类组件扩展组件{
componentDidMount（）{
this.props.onComponentDidMount&&this.props.onComponentDidMount（）
}
render（）{
返回(
A部分
);
}
}

---

完整代码和现场演示：

谢谢您的回答！但是，在我的例子中，

B

视图是一个自定义的组件，具有自己的render（）方法。我不确定如何动态触发该render方法。@只有在初始化并调用setState时才会调用giliev render。在该示例中，B的父组件在设置状态时触发重新渲染，它将调用B的渲染函数。状态更改将导致重新渲染

A

，其中包含

B

。我可以避免重新渲染吗？在这里，我还简化了问题，使其只有两个视图。如果我想要一个组件数组，并且想要定义它们的渲染顺序，该怎么办？这是一个完全不同的问题，但我想知道是否有一个解决方案不会重新呈现问题中的

a

组件。是的，如何在不重新呈现的情况下实现我不确定是否遵循了。如果状态更改，为什么要避免重新渲染？我认为应该使用纯组件或shouldComponentUpdate生命周期方法来解决重新渲染问题