需要在react useState hook中存储React功能组件

Question

我想将React组件存储在react useState中，但我认为这在技术上是错误的。 你对此有何看法。

示例

 const LayoutContext = createContext(null as unknown as {
  setSidebarContent: React.Dispatch<React.SetStateAction<null | React.ReactNode>>;
})

const Layout = () => {
  const [sidebarContent, setSidebarContent] = useState<null | React.ReactNode>(
    null,
  );

  return (
    <LayoutContext.Provider value={{
      setSidebarContent
    }}>

  <div>
    <Sidebar>
      {sidebarContent}
    </Sidebar>
   <div className='page-container'>
      <Suspense fallback={<div>Loading...</div>}>
          <Outlet
      </Suspense>
    </div>
     
  </div>
  </LayoutContext.Provider>)

};

在这个 LayoutContext 示例中，我为侧边栏内容提供了设置器，想知道该方法是否会出现问题，以及是否有其他方法来设置子组件的内容

Answer 1

这里需要做出一个重要的区别：组件是 props、state 和 context 的函数，它返回一个element。您在该上下文中存储的内容是一个元素。 element是React指定的形状的对象（您可以尝试

console.log

来亲自查看它）。

由于您可以在状态和上下文中存储函数和对象，因此您也可以在那里完全存储组件和元素。另外，您可以将它们作为道具传递。

给定一个状态：

const [sidebarContent, setSidebarContent] = useState<null | React.ReactNode>(
    null,
  );

还有一个组件

function MyComponent(props) {
  console.log('MyComponent props', props)
  return (
    <div>MyComponent</div>
  );
}

在状态中存储组件：

setSidebarContent(MyComponent);

//usage:
<Sidebar>
  <MyComponent prop1={someProp1} prop2={someProp2}/>
</Sidebar>

在状态中存储元素（就像你所做的那样）：

//somewhere in a handler or in an effect
setSidebarContent(<MyComponent prop1={someProp1} prop2={someProp2}/>); 

//usage:
<Sidebar>
  {sidebarContent}
</Sidebar>

作为道具传递：

<Sidebar
  contentAsComponent={MyComponent}
  contentAsElement={<MyComponent prop1={someProp1} prop2={someProp2}/>}
/>

主要区别在于设置道具的位置。