trace32无法到达预期断点

Posted 2023-04-17

参考技术A 工具出现问题。TRACE32是由德国Lauterbach公司研制开发的一款仿真测试工具，无法达到预期的断点是工具本身出现问题，需要拿到专业维修点进行维修。

到达断点时如何从 JS 重置 Tailwind 移动菜单

【中文标题】到达断点时如何从 JS 重置 Tailwind 移动菜单

【英文标题】：How to reset Tailwind mobile menu from JS when breakpoint is reached

【发布时间】：2021-05-05 23:48:48

【问题描述】：

来自 Tailwind UI 的免费 stacked application shell 有一个移动菜单，用户可以在小屏幕上显示：

    <!--
      Mobile menu, toggle classes based on menu state.

      Open: "block", closed: "hidden"
    -->
    <div class="hidden md:hidden">
       // mobile menu content
    </div>

在 React 中，我使用 showMobileMenu 状态变量实现了这一点：

    <div className=`$showMobileMenu ? 'block' : 'hidden' md:hidden`>
        // mobile menu content
    </div>

如果用户调整窗口大小（在菜单可见时），它会在 medium 处消失，并在重新调整回 small 时重新出现。在这种情况下，我希望在调整回 small 时隐藏菜单。

实现这一目标的最佳方法是什么？

我目前的解决方案是只监听 window resize 事件并随时设置 showMobileMenu=false window.innerWidth >= 768。

我有点厌倦了由 JS 和 CSS 管理的响应行为，但也许这是典型的。只是想知道 React Tailwind 开发人员是否会以不同的方式处理这个问题。

【问题讨论】：

为什么不直接使用class="block md:hidden"

【参考方案1】：

几天后，我找到了以下方法，以声明式和命令式的方式从 JS 处理断点更改。

基于react-responsive 包构建，我实现了一个小型库，该库提供断点上下文和挂钩（以声明方式处理当前断点）并发布断点更改通知（以命令方式处理断点更改）。

如果您有改进建议，请告诉我。

//
// breakpoints.tsx
//
import  default as React, ReactNode  from 'react'
import  useMediaQuery  from 'react-responsive'

export enum Breakpoint 
  XS = 0,
  SM = 640,
  MD = 768,
  LG = 1024,
  XL = 1280,
  XXL = 1536,


const allBreakpoints = Object.values(Breakpoint)
  .filter((v) => typeof v === 'number')
  .sort((a, b) => (a as number) - (b as number)) as Breakpoint[]

function activeBreakpoint(matches: boolean[]): Breakpoint 
  const index = matches.lastIndexOf(true)
  return allBreakpoints[index]


export type BreakpointEvent = CustomEvent< breakpoint: Breakpoint >

function postBreakpointChangeEvent(breakpoint: Breakpoint): void 
  window.dispatchEvent(
    new CustomEvent('breakpointChange', 
      detail: 
        breakpoint,
      ,
    )
  )


const breakpointContext = React.createContext<Breakpoint>(Breakpoint.XS)

export function BreakpointProvider( children :  children: ReactNode ): JSX.Element 
  const matches = allBreakpoints.map((bp: number, index: number) => 
    // eslint-disable-next-line react-hooks/rules-of-hooks
    return useMediaQuery( query: `(min-width: $bppx)` , undefined, (macthes: boolean) => 
      const breakpoint = activeBreakpoint(matches)
      postBreakpointChangeEvent(breakpoint)
    )
  )
  const breakpoint = activeBreakpoint(matches)
  return <breakpointContext.Provider value=breakpoint>children</breakpointContext.Provider>


export function useBreakpoint(): Breakpoint 
  return React.useContext(breakpointContext)

//
// index.tsx
//
ReactDOM.render(
  <React.StrictMode>
    <BreakpointProvider>
        <App />
    </BreakpointProvider>
  </React.StrictMode>,
  document.getElementById('root')
)

//
// handle breakpoint changes imperatively
//
  const handleBreakpointChange = (evt: Event) => 
    if ((evt as BreakpointEvent).detail.breakpoint >= Breakpoint.MD) 
      setMenuShowing(false)
    
  
  React.useEffect(() => 
    window.addEventListener('breakpointChange', handleBreakpointChange)
    return () => window.removeEventListener('breakpointChange', handleBreakpointChange)
  , [])

//
// handle breakpoint changes declaratively. 
// re-renders each time the breakpoint changes
//
  const breakpoint = useBreakpoint()
  if (breakpoint >= Breakpoint.MD) 
     // render for medium and larger screens
   else 
     // render for less than smaller screeens