从 Chrome devtools 调用组件函数

Question

Apologies if this is a dumb question, but I was wondering if it is at all possible to access a function defined in a React component from the browser? For example:

class Test extends React.Component {

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

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

So once the website has loaded and the component has been mounted, is it possible to somehow access the javascript and invoke someFn()? I know that, for example, Redux variables exist on the global scope and those can be manipulated, but I'm unsure of class functions. If so, I would assume state objects on these classes to be editable as well, right?

Answer 1

With React Developer Tools , you can select your component in the tree on the ⚛️Components dev tools tab. Once selected, that component instance can be accessed in the console as $r , allowing you to invoke your function with $r.someFn() .

Answer 2

在开发者控制台中输入这行代码：
(new Test()).someFn();