Question

我正在尝试创建一个页面，该页面根据一对导航按钮切换显示哪个组件。页面设置如下

ReactDOM.render(<Logo/>, document.getElementById('logo'));
ReactDOM.render(<Upload/>, document.getElementById('main'));
ReactDOM.render(<NavButtons/>, document.getElementById('nav_buttons'))
ReactDOM.render(<Footer />, document.getElementById('footer'));

<Upload/>组件是我希望循环使用的组件。因此，当用户按下“下一步”导航按钮时，将在页面上加载其他组件。

您如何处理？我可以正确解决此问题吗？我是新来的要做出反应的人，所以试图找出最佳方法来利用它。

最终针对不同的用例使用以下两个答案。两者都可以做到这一点。

Answer 1

可以通过在用户单击时更改父容器的内部状态并通过根据状态值检查要呈现的组件来呈现不同的子组件来实现您的用例。

由于您是新来的反应者，我什至不知道您是否明白这一点。在开始在React中进行编码之前，请仔细阅读有关状态，道具和生命周期的react docs。

https://reactjs.org/docs/state-and-lifecycle.html

Answer 2

使用react router并动态更新next按钮中的Link，然后您将获得下一个组件

示例：-

    constructor(props){
    super(props);
    this.increaseIndexValue=this.increaseIndexValue.bind(this);
    this.state = {
      "nextIndex":1,
      "componentArray" : ["Logo", "Upload", "NavButtons", "Footer"],
    }
    increaseIndexValue(){
    const {nextIndex, componentArray} = this.state;
    if(nextIndex == 1){
        this.setState((prevState) => {
          return {nextIndex: prevState.nextIndex + 1}
        });
    }
    else if (nextIndex >1 && nextIndex < componentArray.length-1) {
      this.setState((prevState) => {
        return {nextIndex: prevState.nextIndex + 1}
      });
    }
    else if (nextIndex == componentArray.length -1) {
      this.setState((prevState) => {
        return {nextIndex: 3 }
      });
    }
  }
    <Router>
            <Route exact path="/" component={Logo} />
            <Route path="/Logo" component={Logo} />
            <Route path="/Upload" component={Upload} />
            <Route path="/NavButtons" component={NavButtons} />
            <Route path="/Footer" component={Footer} />
         <Link to={"/"+componentArray[nextIndex]}><a href="" className="next" onClick={this.increaseIndexValue}>Next &raquo;</a></Link>

      </Router>

以编程方式更改正在显示的React组件

2 个答案: