Question

顾名思义，开发人员工具仅在开发期间才可见或可访问，而在生产中则不可见。我不希望我的最终用户看到状态和组件树，从而了解幕后情况。尽管生产中的React Developer Tool既不允许修改组件的状态，也不能透露组件的名称，但是它无法完全隐藏组件或完全禁用工具。最终用户仍然可以看到每个组件的状态和整个应用程序树。

是否有一种方法可以排除/禁用React Developer工具或在生产版本中将其断开连接，例如Augury对Angular所做的工作？

Answer 1

虽然这个问题仍在起草阶段，但我正在互联网上寻找答案，但我发现了this个。但是可悲的是这没有用。但是它确实告诉我，它与__REACT_DEVTOOLS_GLOBAL_HOOK__有关。

因此，在使用它并对其进行修改之后，它就可以了。它成功将应用程序从React Developer Tools断开。

以下是将应用程序与React Developer Tools断开连接的代码。

// disableReactDevTools.ts

// Declare the types if you're using TypeScript
// Remove this block if you're using JavaScript
declare global {
  interface Window {
    __REACT_DEVTOOLS_GLOBAL_HOOK__: any;
  }
}

export function disableReactDevTools() {
  // Check if the React Developer Tools global hook exists
  if (typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__ !== "object") {
    return;
  }

  for (const prop in window.__REACT_DEVTOOLS_GLOBAL_HOOK__) {
    if (prop === "renderers") {
      // this line will remove that one console error

      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] = new Map()
    } else {
      // Replace all of its properties with a no-op function or a null value
      // depending on their types

      window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] =
        typeof window.__REACT_DEVTOOLS_GLOBAL_HOOK__[prop] === "function"
          ? () => {}
          : null;
    }
  }
}

// index.tsx
import React from "react";
import ReactDOM from "react-dom";

// ...

if (process.env.NODE_ENV === "production") disableReactDevTools();
// ...

此代码将在控制台中引发任何错误或警告。

如何在生产版本中排除/禁用React Developer Tools？

1 个答案: