reactjs - 如何在渲染另一个组件后渲染一个 React Native 组件？

Question

假设我有 2 个组件 A 和 B。我想渲染组件 A，然后渲染组件 B。为了使这一点更加明显，我还想在 A 和 B 的渲染之间设置一些延迟(假设 2 秒)。解决这个问题的最佳方法是什么？我想我应该以某种方式触发 A 的 componentDidMount 中 B 的渲染，但我真的不知道如何触发。

谢谢:)

Answer 1

您的问题非常模糊并且可以多种实现。 这是我的看法:

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

完整代码和现场演示:https://snack.expo.io/SkIOLJ3eM