使用上下文存储JSX组件以在其他地方显示是否滥用上下文？

德约翰斯顿

我有一个应用程序，用户将单击该应用程序的各个部分，这将在右侧的抽屉中显示某种配置选项。

我要解决的方法是将要显示的任何内容存储在上下文中。这样，抽屉仅需要从上下文中检索其内容，而该部分中需要设置内容的任何部分都可以直接通过上下文进行设置。

关键代码段：

const MainContent = () => {
  const items = ["foo", "bar", "biz"];

  const { setContent } = useContext(DrawerContentContext);
  /**
   * Note that in the real world, these components could exist at any level of nesting 
   */
  return (
    <Fragment>
      {items.map((v, i) => (
        <Button
          key={i}
          onClick={() => {
            setContent(<div>{v}</div>);
          }}
        >
          {v}
        </Button>
      ))}
    </Fragment>
  );
};

const MyDrawer = () => {
  const classes = useStyles();

  const { content } = useContext(DrawerContentContext);

  return (
    <Drawer
      anchor="right"
      open={true}
      variant="persistent"
      classes={{ paper: classes.drawer }}
    >
      draw content
      <hr />
      {content ? content : "empty"}
    </Drawer>
  );
};

export default function SimplePopover() {
  const [drawContent, setDrawerContent] = React.useState(null);
  return (
    <div>
      <DrawerContentContext.Provider
        value={{
          content: drawContent,
          setContent: setDrawerContent
        }}
      >
        <MainContent />
        <MyDrawer />
      </DrawerContentContext.Provider>
    </div>
  );
}

我的问题是-这是对上下文的适当使用，还是这种解决方案可能会遇到渲染/虚拟dom等问题？

有更整齐的方法吗？（即自定义钩子？但是-请记住，某些想要进行设置的组件可能不是功能组件）。

Shubham Khatri

请注意，纯粹从技术角度考虑，将组件存储在Context中是很好的，因为JSX结构只不过是最终使用编译的对象React.createElement。

但是，您想要实现的目标可以轻松地通过门户网站完成，并且可以在通过上下文渲染之后对其他地方呈现的组件提供更多控制，因为如果直接渲染而不是存储，则可以更好地控制状态和处理程序将它们作为上下文中的值

将组件存储在上下文中并呈现它们的另一个缺点是，这使组件的调试非常困难。通常，如果组件变得复杂，您将很难发现谁是道具供应商

import React, {
  Fragment,
  useContext,
  useState,
  useRef,
  useEffect
} from "react";
import { makeStyles } from "@material-ui/core/styles";
import Button from "@material-ui/core/Button";
import { Drawer } from "@material-ui/core";
import ReactDOM from "react-dom";

const useStyles = makeStyles(theme => ({
  typography: {
    padding: theme.spacing(2)
  },
  drawer: {
    width: 200
  }
}));

const DrawerContentContext = React.createContext({
  ref: null,
  setRef: () => {}
});

const MainContent = () => {
  const items = ["foo", "bar", "biz"];
  const [renderValue, setRenderValue] = useState("");
  const { ref } = useContext(DrawerContentContext);

  return (
    <Fragment>
      {items.map((v, i) => (
        <Button
          key={i}
          onClick={() => {
            setRenderValue(v);
          }}
        >
          {v}
        </Button>
      ))}
      {renderValue
        ? ReactDOM.createPortal(<div>{renderValue}</div>, ref.current)
        : null}
    </Fragment>
  );
};

const MyDrawer = () => {
  const classes = useStyles();
  const contentRef = useRef(null);
  const { setRef } = useContext(DrawerContentContext);
  useEffect(() => {
    setRef(contentRef);
  }, []);
  return (
    <Drawer
      anchor="right"
      open={true}
      variant="persistent"
      classes={{ paper: classes.drawer }}
    >
      draw content
      <hr />
      <div ref={contentRef} />
    </Drawer>
  );
};

export default function SimplePopover() {
  const [ref, setRef] = React.useState(null);
  return (
    <div>
      <DrawerContentContext.Provider
        value={{
          ref,
          setRef
        }}
      >
        <MainContent />
        <MyDrawer />
      </DrawerContentContext.Provider>
    </div>
  );
}

CodeSandbox演示

本文收集自互联网，转载请注明来源。

如有侵权，请联系 [email protected] 删除。