Question

我有基本的hello world react组件渲染在我的rails app中。

我试图让组件重绘，以便它（通过Ajax）获取Postgres数据库中发生的一些数据更改。

从Chrome开发者控制台，我如何获得＆＃34;参考＆＃34; 到react组件，以便我可以调用组件的.forceUpdate（）方法吗？

我的代码：

// ideas from https://medium.com/@hpux/rails-5-1-loves-javascript-a1d84d5318b
// app/javascript/packs/hello_react.jsx 
import React from 'react'                                                                                    
import ReactDOM from 'react-dom'                                                                             
class Hello extends React.Component {
  // stuff ...
}

document.addEventListener("DOMContentLoaded", e => {                                                       
  ReactDOM.render(<Hello name="React" />, document.getElementById('my-div'))                       
})

我尝试了什么

更改

ReactDOM.render(<Hello name="React" />, document.getElementById('my-div'))

到

var foo = ReactDOM.render(<Hello name="React" />, document.getElementById('my-div'))

然后在开发者控制台中，我做了

foo

我得到了

未捕获的ReferenceError：未定义foo at：1：1（匿名）@ VM4867：1

更新

我在chrome dev控制台中试过这个

> ReactDOM

我得到了

VM4871:1 Uncaught ReferenceError: ReactDOM is not defined
    at <anonymous>:1:1
(anonymous) @ VM4871:1

更新：我发现了一个危险的解决方案，希望有人可以提供更好的解决方案：

constructor() { super(); if ( window ) { window.myThing = this; } }

Answer 1

您应该为Chrome或Firefox安装React Developer Tools扩展程序。重新启动浏览器后，您可以打开React选项卡并检查组件。然后，如果您切换到控制台选项卡并键入$r.，您应该看到该组件的方法（您可以访问状态，道具等等）。

$r.forceUpdate()

我希望这会对你有所帮助。

Answer 2

这样做：

import React from 'react'                                                                                    
import ReactDOM from 'react-dom'                                                                             
class Hello extends React.Component {
  // stuff ...
}

document.addEventListener("DOMContentLoaded", e => { 
  const helloComponent = <Hello name="React" />;

  window.helloComponent = helloComponent;   <-----------------

  ReactDOM.render(helloComponent, document.getElementById('my-div'))                       
})

然后，从控制台访问您的组件helloComponent

我可以获得对jsx react组件的引用，以便我可以从chrome开发人员控制台强制更新/重新注册react组件吗？

2 个答案: