React中如何创建按钮点击触发的组件切换函数？

你的代码里有几个关键问题需要修正，才能实现点击按钮切换到下一个组件的功能：

• 状态更新方式错误：setEtapa是React的状态更新函数，直接调用它并传入新值即可，不需要.onClick。另外要判断当前阶段，避免超过最后一个阶段（4）。
• 渲染函数未执行：renderizarEtapa是一个函数，需要调用它才能返回对应组件，所以要写成{renderizarEtapa()}而不是{renderizarEtapa}。
• 按钮未绑定点击事件：需要给按钮添加onClick属性，绑定到切换阶段的函数，同时在最后一个阶段隐藏按钮。

修正后的完整代码：

import React, { useState } from "react"
import Etapa1 from "./components/Etapa1";
import Etapa2 from "./components/Etapa2";
import Etapa3 from "./components/Etapa3";
import Final from "./components/Final";
import "./styles.css";

export default function App() {
  const [etapa, setEtapa] = useState(1)

  const irParaProximaEtapa = () => {
    // 只在当前阶段小于4时更新状态
    if (etapa < 4) {
      setEtapa(etapa + 1)
    }
  }

  const renderizarEtapa = () => {
    switch (etapa) {
      case 1:
        return <Etapa1 />;
      case 2:
        return <Etapa2 />;
      case 3:
        return <Etapa3 />;
      case 4:
        return <Final />
      default:
        return null;
    }
  }

  return (
    <div className="App">
      {renderizarEtapa()}
      {/* 只有当前阶段不是最后一个时显示按钮 */}
      {etapa < 4 && <button onClick={irParaProximaEtapa}>Próxima etapa</button>}
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Matheus Alves