小编Ben*_*gan的帖子

我有一个组件，当在较小的桌面窗口中时，它会调整大小为一排水平的引导卡。对于没有水平鼠标滚轮且不使用触摸板的用户，我希望允许用户在悬停在此特定组件上时使用垂直鼠标滚轮移动水平滚动。

这是我基于我的代码的原始 StackOverflow 问题：https : //stackoverflow.com/a/15343916/8387497

水平滚动辅助组件：

function horizontalScroll (event) {
  const delta = Math.max(-1, Math.min(1, (event.nativeEvent.wheelDelta || -event.nativeEvent.detail)))
  event.currentTarget.scrollLeft -= (delta * 10)
  event.preventDefault
}

我如何在需要水平滚动的组件上实现它：

<Row className='announcements-home' onWheel={horizontalScroll} >

当我将此horizontalScroll辅助函数放置在 React onWheel 事件中时，它会水平和垂直滚动。我想要的结果只是水平滚动。此外，Firefox 似乎完全没有响应这些更改的水平滚动。

我的应用程序在 NextJS 上运行，我希望用户在我的 index.js 页面上生成的一些列表项在用户通过<Link>. 我决定我可以使用useContext钩子在全局级别跟踪状态，但我遇到的问题是 NextJS 应用程序似乎在每次我进行页面更改时都在刷新自己，从而使我的列表数组呈现空白。下面是我创建的 4 段主要代码，它们应该完成持久化状态：

在这里，我创建了一个自定义_app.js，ItemContext通过使用.Provider和添加来自我创建的另一个组件的值来包装我的页面，该组件被调用useItemState来处理项目处理程序和项目本身。

// _app.js

import useItemState from '../components/useItemState';
import ItemContext from '../components/ItemContext';

function MyApp({Component, pageProps}){
    const { items, addItem, deleteItem, updateItem  } = useItemState([]);

    return (
    <ItemContext.Provider value={{items, addItem, deleteItem, updateItem}}>
      <Component {...pageProps} />
    </ItemContext.Provider>
    )
}

  export default MyApp;

这是 ItemContext 组件，它包含初始 createContext

// ItemContext.js

const ItemContext = createContext(null)

export default ItemContext

在 Index.js 中，我从我的ItemContext文件中调用项和项处理程序，因为我使用自定义 _app.js …