reactjs - 使用 React Hooks 单击上一个/下一个按钮时在 div 之间切换

Question

首先，我对 React 还很陌生，所以有很多东西我不知道。但在学习的过程中我遇到了 Hooks，这对于像我这样的菜鸟来说似乎真的很好。但是，我不太确定我的下一个“项目”。

基本上我有 4 个大小相同但内容不同的 div。我想做的是从第一个 div 开始(其余部分不可见)，然后在该容器中我有一个“下一步”按钮，如果我单击它，它会更改/切换到第二个 div，然后它有一个“上一页”和“下一页”按钮等等。

我不知道使用 useState 或类似的东西使用 Hooks 是否可以实现这一点。

编辑示例:

所以希望这能说明我的想法。这就是我最初的想法。我想我可能会被困在 return 处，我不确定如何将其实际插入到 HTML 中，或者你在 React-lingo 中如何调用它。

const App = ( ) => {

    const initialCount = 0
    const [count, setCount] = useState(initialCount)

    if (count = 0) {
        <div className="box">
            <p>DIV 1</p>
            <div className="btn" onClick={ () => setCount(count + 1) } >Next</div>
        </div>
    } else if (count = 1) {
        <div className="box">
            <p>DIV 2</p>
            <div className="btn" onClick={ () => setCount(count - 1) } >Prev</div>
            <div className="btn" onClick={ () => setCount(count + 1) } >Next</div>
        </div>
    }

    return (
        <div>
           {one of the if-statement elements}
        </div>
    );
};

export default memo(App);

Answer 1

为了理解这一点，您需要了解 React 是如何工作的，通常要绘制/插入 HTML 元素，您必须从函数组件返回它，或者在 Class 组件中使用渲染类方法，将 HTML 放在其他地方不会将它们渲染到页面

至于如何实现这一点，有很多方法，对我来说最简单的就是在数组中定义一组要渲染的组件，然后根据当前计数来渲染它们

const App = () => {
    const [count, setCount] = React.useState(0);
    
    const components = [
        <div>1</div>,
        <div>2</div>,
        <div>3</div>,
        <div>4</div>
    ]

    return <div>
        {
            // render component from our components array
            components[count]
        }

        {/* show previous button if we are not on first element */}
        {count > 0 && <button onClick={() => setCount(count - 1)}>prev</button>}

        {/* hide next button if we are at the last element */}
        {count < components.length - 1 && <button onClick={() => setCount(count + 1)}>next</button>}
    </div>
}