reactjs - 在 console.log 上反应无穷大道具

Question

我遇到了一个问题，假设您有一个带有组件的对象，然后该组件将整个对象作为引用，在当前情况下，在 console.log 之后它显示递归引用。也许这是一个正常的情况，有趣的是 console.log 如何保持无限引用。单击浏览器检查工具上的展开按钮后，它会显示数据。

我在下面添加了示例代码。还有反应应用程序链接。

  const SampleComponent = () => {
      const dynamicState = {
        component: <></>
      };
      return <A dynamicState={dynamicState} />;
    };
    
    interface AProps {
      dynamicState: {
        component: JSX.Element;
      };
    }
    
    const A = (props: AProps) => {
      const { dynamicState } = props;
      dynamicState.component = <B dynamicState={dynamicState} />;
      console.log(dynamicState);
      return <></>;
    };
    
    
    const B = (props: AProps) => {
      return <></>;
    };

Console.log 结果

{component: {…}}
      component:
         $$typeof: Symbol(react.element)
          key: null
             props:
             dynamicState:
              component:
                 $$typeof: Symbol(react.element)
                 key: null
                 props:
                  dynamicState:
                             ....

标签： reactjstypescript