时间戳

首页 > 解决方案 > 使用 React Hooks 单击上一个/下一个按钮时在 div 之间切换

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

问题描述

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

基本上我有 4 个大小相同但内容不同的 div。我想做的是从第一个 div 开始（其余不可见），然后在那个容器中我有一个“下一步”按钮，如果我单击它会更改/切换到第二个 div，然后它有一个“ Prev”和“Next”按钮，以此类推。

我不知道使用 HooksuseState或类似的东西是否有可能。

编辑示例：

所以希望这能说明我的想法。这是我最初的想法。我想我可能会被困在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);

标签： reactjsreact-hooks

解决方案

为了理解这一点，您需要了解 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>
}

推荐阅读