從 Chrome devtools 調用組件函數

Question

抱歉，這是一個愚蠢的問題，但我想知道是否有可能從瀏覽器訪問 React 組件中定義的函數？ 例如：

class Test extends React.Component {

  someFn = () => {
    console.log('hey!') 
  }

  render() { return <div>...</div> }
}

因此，一旦網站加載完畢並安裝了組件，是否有可能以某種方式訪問​​ javascript 並調用 someFn()？ 我知道，例如，Redux 變量存在於全局范圍內並且可以操作這些變量，但我不確定類函數。 如果是這樣，我會假設這些類上的狀態對象也是可編輯的，對嗎？

Answer 1

使用React Developer Tools ，您可以在 ⚛️Components 開發工具選項卡上的樹中選擇您的組件。 選擇后，該組件實例可以在控制台中作為$r訪問，允許您使用$r.someFn()調用您的函數。

Answer 2

在開發者控制台中輸入這行代碼：
(new Test()).someFn();