React 组件未渲染？可能是这个原因，教你用 useRef 巧妙解决

javascript

2024-03-12 18:48:18

React 组件未渲染：当组件被分配给变量时的问题及其解决方案

问题

在 React 应用中，你可能遇到过这样的情况：当你将组件分配给一个变量时，组件并没有被渲染。这可能是一个令人困惑的问题，尤其是当你的代码似乎是正确的。

原因分析

组件渲染的触发因素是 props 的变化。当 props 发生变化时，组件才会重新渲染。当组件被分配给一个变量时，除非父组件中直接使用该变量，否则组件的 props 不会发生变化。因此，组件不会重新渲染。

解决方案

解决这个问题有两种方法：

直接使用组件变量

在父组件中直接使用组件变量，这将导致组件 props 的变化，从而触发组件的重新渲染。

return (
  <SideMenuWithSubMenu
    icon={<SubmenuIcon />}
    headerText="Submenu"
    subMenuItems={[
      {
        to: '/submenu',
        text: 'Inbox',
        notification: countBadge
      }
    ]}
  />
  {countBadge}
);

使用 useRef hook

使用 useRef hook 来跟踪组件的引用。这允许你在组件外部访问组件的当前实例，即使它被分配给一个变量。

const countBadgeRef = React.useRef();

return (
  <SideMenuWithSubMenu
    icon={<SubmenuIcon />}
    headerText="Submenu"
    subMenuItems={[
      {
        to: '/submenu',
        text: 'Inbox',
        notification: countBadgeRef.current
      }
    ]}
  />
  <CountBadgeWithListener id="SID" url={'submenu'} ref={countBadgeRef} />
);