相关推荐:java - Spring Security for single user

ation in which a specific url '/newPost' should only be accessible to one user, the admin. When trying to navigate to '/newPost', the user should be redirected to a login page where he must verify his identity as admin.

up vote 17 down vote favorite 5

For the purposes of debugging in the console, is there any mechanism available in React to use a DOM element instance to get the backing React component?

This question has been asked previously in the context of using it in production code. However, my focus is on development builds for the purpose of debugging.

I'm familiar with the Chrome debugging extension for React, however this isn't available in all browsers. Combining the DOM explorer and console it is easy to use the '$0' shortcut to access information about the highlighted DOM element.

I would like to write code something like this in the debugging console: getComponentFromElement($0).props

Even in a the React development build is there no mechanism to use maybe the element's ReactId to get at the component?

javascript reactjs share edited Mar 28 '15 at 21:52 asked Mar 28 '15 at 19:44 LodeRunner28 461 3 13 2   possible duplicate of React - get React component from a child DOM element? –  WiredPrairie Mar 28 '15 at 20:26      Edited question to explain difference from the previously asked question. –  LodeRunner28 Mar 28 '15 at 21:53      @WiredPrairie this is actually a bit different - it's more about tree filtering than simply getting the element. –  Josh from Qaribou Mar 30 '15 at 4:03 add a comment  | 

4 Answers 4

active oldest votes up vote 6 down vote accepted

I've just read through the docs, and afaik none of the externally-exposed APIs will let you directly go in and find a React component by ID. However, you can update your initial React.render() call and keep the return value somewhere, e.g.:

window.searchRoot = React.render(React.createElement......

You can then reference searchRoot, and look through that directly, or traverse it using the React.addons.TestUtils. e.g. this will give you all the components:

var componentsArray = React.addons.TestUtils.findAllInRenderedTree(window.searchRoot, function() { return true; });

There are several built-in methods for filtering this tree, or you can write your own function to only return components based on some check you write.

More about TestUtils here: https://facebook.github.io/react/docs/test-utils.html

share answered Mar 28 '15 at 20:28 Josh from Qaribou 1,863 8 14      Perfect. The TestUtils mechanism provided exactly what I was looking for. Now in my debug builds I can supply a global function that I can use in the console that search the returned component list and match it up to the selected element. –  LodeRunner28 Mar 28 '15 at 21:45      Basing production code on test tooling seems really weird to me... It rather indicates a conceptual problem in the code structure. Using such a solution has obviously its place in testing mode, but is a "code smell" in production. –  Mike Aski Nov 9 '15 at 13:05 2   @MikeAski this is very clearly always for testing. –  Josh from Qaribou Nov 10 '15 at 20:24 add a comment  |  up vote 21 down vote

The other answers didn't work for me.

Here's what I use, with React 15.3.0:

window.FindReact = function(dom) {
    for (var key in dom)
        if (key.startsWith("__reactInternalInstance$")) {
            var compInternals = dom[key]._currentElement;
            var compWrapper = compInternals._owner;
            var comp = compWrapper._instance;
            return comp;
        }
    return null;
};

And then to use it:

var someElement = document.getElementById("someElement");
FindReact(someElement).setState({test1: test2});
share answered Aug 26 '16 at 11:21 Venryx 619 7 8      This is THE solution when patching render is not an option (eg enhancing a page by script injection). –  dev Oct 7 '16 at 8:30      Exactly what I was looking for; thank you! –  Jordan Bonitatis Oct 19 '16 at 17:21      Awesome solution, helped me very much –  Arthur Feb 16 at 3:23 add a comment  |  up vote 3 down vote

i wrote this small hack to enable access any react component from its dom node

var ReactDOM = require('react-dom');
(function () {
    var _render = ReactDOM.render;
    ReactDOM.render = function () {
        return arguments[1].react = _render.apply(this, arguments);
    };
})();

then you can access any component directly using:

document.getElementById("lol").react

or using JQuery

$("#lol").get(0).react
share answered May 14 '16 at 18:03 fareed namrouti 13k 2 33 37 add a comment  |  up vote 2 down vote

Here is a small snippet i'm currently using.

It works with React 0.14.7.

Gist with the code

let searchRoot = ReactDom.render(ROOT, document.getElementById('main'));

var getComponent = (comp) => comp._renderedComponent ? getComponent(comp._renderedComponent) : comp;

var getComponentById = (id)=> {
  var comp = searchRoot._reactInternalInstance;
  var path = id.substr(1).split('.').map(a=> '.' + a);
  if (comp._rootNodeID !== path.shift()) throw 'Unknown root';
  while (path.length > 0) {
    comp = getComponent(comp)._renderedChildren[path.shift()];
  }
  return comp._instance;
};

window.$r = (node)=> getComponentById(node.getAttribute('data-reactid'))

to run it, open Devtools, highlight an element you want to examine, and in the console type : $r($0)

share edited Mar 17 '16 at 8:16 answered Mar 15 '16 at 10:39 Nadav Leshem 165 7 add a comment  | 

Your Answer

  draft saved draft discarded

Sign up or log in

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name Email

Post as a guest

Name Email discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged javascript reactjs or ask your own question.

相关推荐:spring security - AlreadyBuiltException when setting variable using @Value

dap server information in following configuration class.//WebSecurityConfig.java@Configuration@EnableWebSecuritypublic class WebSecurityConfig extends WebSecurityConfigurerAdapter { @Override protected void

快照源:http://my.oschina.net/blooms/blog/79073