InspectedElementView() — react Function Reference

Source Code

packages/react-devtools-shared/src/devtools/views/Components/InspectedElementView.js lines 51–234

export default function InspectedElementView({
  element,
  hookNames,
  inspectedElement,
  parseHookNames,
  toggleParseHookNames,
  symbolicatedSourcePromise,
}: Props): React.Node {
  const {
    stack,
    owners,
    rendererPackageName,
    rendererVersion,
    rootType,
    source,
    nativeTag,
    type,
  } = inspectedElement;

  const bridge = useContext(BridgeContext);
  const store = useContext(StoreContext);

  const rendererLabel =
    rendererPackageName !== null && rendererVersion !== null
      ? `${rendererPackageName}@${rendererVersion}`
      : null;
  const showOwnersList = owners !== null && owners.length > 0;
  const showStack = stack != null && stack.length > 0;
  const showRenderedBy =
    showStack || showOwnersList || rendererLabel !== null || rootType !== null;

  const propsSection = (
    <div className={styles.InspectedElementSection}>
      <InspectedElementPropsTree
        bridge={bridge}
        element={element}
        inspectedElement={inspectedElement}
        store={store}
      />
    </div>
  );

  return (
    <Fragment>
      <div className={styles.InspectedElement}>
        <div className={styles.InspectedElementSection}>
          <InspectedElementBadges
            hocDisplayNames={element.hocDisplayNames}
            compiledWithForget={element.compiledWithForget}
            nativeTag={nativeTag}
          />
        </div>

        {
          // For Suspense and Activity we show the props further down.
          type !== ElementTypeSuspense && type !== ElementTypeActivity
            ? propsSection
            : null
        }

        <div className={styles.InspectedElementSection}>
          <InspectedElementStateTree
            bridge={bridge}
            element={element}
            inspectedElement={inspectedElement}
            store={store}
          />
        </div>

        <div className={styles.InspectedElementSection}>
          <InspectedElementHooksTree
            bridge={bridge}
            element={element}
            hookNames={hookNames}
            inspectedElement={inspectedElement}
            parseHookNames={parseHookNames}
            store={store}
            toggleParseHookNames={toggleParseHookNames}
          />
        </div>