1

我希望一个组件可以在多个组件之间共享，但不会停止反应。我试过这个：

const ShareCtx = createContext({});

const useShare = () => useContext(ShareCtx);

const ShareProvider = ({children}) => {

  const [portalComponent, setPortalComponent] = useState(null);

  return <ShareCtx.Provider value={{portalComponent, setPortalComponent}}>
    {children}
  </ShareCtx.Provider>
}

const HigherInHierarchy = ({children}) => {

  const {portalComponent} = useShare();

  return <div>
    <p>Higher in hierarchy</p>
    {portalComponent}
    {children}
  </div>
}

const LowerInHierarchy = ({children}) => {

  const {portalComponent, setPortalComponent} = useShare();

  const [value, setValue] = useState('middle');

  const x = useMemo(() => {
    return <input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      />
  }, [value])

  useEffect(() => {
    setPortalComponent(x);
  }, [])

  return <div>
    <p>Lower in hierarchy</p>
    {x}
  </div>
}


export default function App() {
  return (
    <ShareProvider>
      <HigherInHierarchy>
        <LowerInHierarchy />
      </HigherInHierarchy>
    </ShareProvider>
  );
}

低阶组件，创建一个x组件并渲染它。此外，它会将其分配给ShareCtx. 我面临的问题是，虽然该{x}部分在 的渲染方法内工作正常LowerInHierarchy，但同样不适用于{portalComponent}组件的渲染方法内HigherInHierarchy。

我应该用createPortal这个还是别的什么？

我要解决的是 1）在某个组件中定义的本地状态，2）作为道具传递此本地状态的功能组件，3）此组件要在任何其他地方呈现。

4

0 回答 0