如何在同一页面上渲染组件

Question

在我的页面顶部设计中，您可以看到图片为links。当您点击不同的图片时，会调用不同的组件。例如，onClick 方法显示设置为 true 的组件：

    state = {
        showPage1: true,
        showPage2: false,
        showPage3: false,
        showPage4: false
      };
      onClick1 = e =>
      this.setState({ showPage1 : true, showPage2: false, showPage3: false, showPage4: false
      });
      //continue with another onClick methods

而在最终的渲染方法中是：

render (){
    const src = '/images/image.jpg'
    return(
      <div>
      <Image.Group size='tiny'>
      <Image src={src} onClick={this.onClick1}/>
      </Image.Group>
      { this.renderPage() }
      </div>
    )
  }

基于此，不同的组件显示在同一页面上。

 renderPage() {
    const showPage1 = this.state.showPage1;
    if (showPage1) {
      return (
          <Page1 submit={this.submit}/>
      );}

现在，每个组件对我来说都是一个表单，用户可以在其中提交详细信息。提交详细信息后，我不知道如何重定向到另一个组件。例如，如果它是 Page1，那么我想自动重定向到 Page2 等等。这就是我现在所拥有的，但这当然行不通。如果这个组件没有 link，我不确定如何一个接一个地调用另一个组件，因为它显示在同一页面上。

submit = data =>
     this.props.saveComponent(data).then(() => this.props.history.push('/text'));

提前致谢！

Answer 1

虽然路由确实是解决此问题的更可持续的解决方案，但在我看来，如果不安装 React Router，您只需要更新状态，不是吗？您可以在 data 中包含 currentPage 和 nextPage 属性以指示要转换到哪个页面。例如：

submit = data =>
  this.props.saveComponent(data).then(
    () => this.setState({
      [data.currentPage]: false,
      [data.nextPage]: true
    })

虽然这是一种非常适合任务路由器的类型，但与其进行条件渲染，我绝对建议您学习更多有关路由的知识。

如何在同一页面上渲染组件

How to render components on the same page in react

forms

push

reactjs