如何创建一个函数，应该调用每次一个按钮被点击在React?

Question

我在App.js中创建了四个组件和逻辑，将有条件地呈现它们中的每一个。我想创建一个按钮，它将引导到下一个组件，但我不知道如何创建它。

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 = () => {
setEtapa.onClick(etapa + 1)
}
const renderizarEtapa = () => {
switch (etapa) {
case 1:
return <Etapa1 />;
case 2:
return <Etapa2 />;
case 3:
return <Etapa3 />;
case 4:
return <Final />
default:
break;
}
}
return (
<div className="App">
{renderizarEtapa}
<button>Proxima etapa</button>
</div>
);
}

Answer 1

在JSX内部传递函数的那一行是错误的:

{renderizarEtapa}

这将使React抛出一个警告:">函数作为React的子节点是无效的。如果你返回一个组件而不是从渲染中返回，可能会发生这种情况。或者你想调用这个函数而不是返回它。"它应该被称为:

{renderizarEtapa()}

那么，你的irParaProximaEtapa是一个事件处理函数，它不应该试图访问setter函数setEtapa的属性，因为这是不可能的，它应该调用setEtapa函数。

接下来，要给button元素一个'click'事件侦听器，您要传递给它一个onClickprop，并将事件处理程序函数修改为:

const irParaProximaEtapa = () => {
setEtapa(etapa + 1)
}

最后的代码看起来像这样:

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 = () => {
setEtapa(etapa + 1)
}
const renderizarEtapa = () => {
switch (etapa) {
case 1:
return <Etapa1 />;
case 2:
return <Etapa2 />;
case 3:
return <Etapa3 />;
case 4:
return <Final />
default:
break;
}
}
return (
<div className="App">
{renderizarEtapa()}
<button onClick={irParaProximaEtapa}>Proxima etapa</button>
</div>
);
}