Question

在我页面顶部的设计中，您可以将图片视为链接。单击不同的图片时，将调用其他组件。例如，onClick方法show component设置为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，依此类推。这就是我现在所拥有的，但当然，这不起作用。如果此组件没有链接，我不确定如何在另一个组件之后调用一个组件，因为它显示在同一页面上。

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

提前谢谢！

Answer 1

虽然路由是解决此问题的更可持续的解决方案，但如果不安装React路由器，我觉得您只需要更新您的状态，不是吗？您可以在currentPage中添加nextPage和data属性，以指明要转换到的页面。例如：

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

这是路由器非常适合的那种任务，所以我不是做条件渲染，而是建议我更多地了解路线。

如何在反应中在同一页面上呈现组件

1 个答案: