Function App

src/App.tsx:19–100

()

})

function App() {
  const [api, contextHolder] = notification.useNotification();
  const mainRef = useRef() as React.MutableRefObject<HTMLDivElement>
  const { globalObj, editObj, activeCompId, activeEditId, preview, layout, compName } = useStore((state) => state)

  React.useMemo(() => {
    const selectComp = globalObj.content.find((item: CompUnion) => item && item.id === activeCompId)
    if (selectComp) {
      const componentName = selectComp.componentName as CompKey
      componentName && setCompName(componentName)
      selectComp && setSelectComp(selectComp)
    }
  }, [activeCompId])

  React.useMemo(() => {
    if (compName && editObj) {
      const selectEdit = (editObj[compName] as any[]).find((item: CompUnion) => item && item.id === activeEditId)
      const editName = selectEdit ? selectEdit.type : null
      setEditName(editName)
      setSelectEdit(selectEdit)
    }
    return [null, null]
  }, [activeEditId])

  const contentWidth = React.useMemo(() => {
    return (100 - layout.editWidth - layout.sidebarWidth)
  }, [layout])

  React.useEffect(() => {
    if (globalObj.content.length > 0) {
      const comp = globalObj.content[0]
      comp && setActiveCompId(comp.id)
    }
  }, [])

  React.useEffect(() => {
    const code = getFileCodeTree(globalObj, { langs: 'react' })
    setCodeObj(code)
  }, [globalObj])

  return (
    <Context.Provider value={{
      mainRef,
      contextHolder,
      api
    }}>
      <div className="App">
        {contextHolder}
        <BrowserRouter>
          <Navbar></Navbar>
          <Routes >
            <Route
              path="/"
              element={<Redirect to="/edit" />}
            />
            <Route element={
              <div className='layout-main'>
                {/* 根路由——非预览状态可以编辑 */}