Find and manipulate a React.js component from the JavaScript console - Stack Overflow

admin管理员组

文章数量:1384349

When I work with JS I tend to whip out a console for the browser and manipulate values on the fly.

I have a page where I use React to render some ponents and I had the idea that it would be great to be able to manipulate it's state from the console to debug a design quirk which is only visible if the ponent is in a corner-case state.

I ran into problem that I was unable to get hold of a reference to my ponent.

I figured there might be a list of active ponents currently being rendered somewhere, but I was not able to find one on the React global object or anywhere else.

Is there an exposed reference to the ponents being rendered?

I'm rendering the ponent like:

<script>React.render(React.createElement(Comp, domElem))</script>

I could store a reference to the result of React.createElement() but it seems to be an antipattern. Also I'm using the ReactJS.NET library to handle server-side rendering for me so the whole React.render line is generated and is hard to modify.

My other idea was to create a mixin that makes the ponent explicitly expose itself on mount, like:

var ActiveComponents = [];
var debugMixin = {
    ponentDidMount: function () {
        var id = this.getDOMNode().id;
        ActiveComponents[id] = {
            id: id,
            getState: () => { return this.state; },
            setState: (state) => { this.setState(state); },
            p: this
        };
    }
};

Are there drawbacks for an approach like this? Is this the same antipattern mentioned above?

Although being much cleaner than entangling these test hooks in the ponent code directly, adding a mixin is still a modification, and I would like to avoid that if possible.

The questions I hope to get answers for are bolded.

When I work with JS I tend to whip out a console for the browser and manipulate values on the fly.

I have a page where I use React to render some ponents and I had the idea that it would be great to be able to manipulate it's state from the console to debug a design quirk which is only visible if the ponent is in a corner-case state.

I ran into problem that I was unable to get hold of a reference to my ponent.

I figured there might be a list of active ponents currently being rendered somewhere, but I was not able to find one on the React global object or anywhere else.

Is there an exposed reference to the ponents being rendered?

I'm rendering the ponent like:

<script>React.render(React.createElement(Comp, domElem))</script>

I could store a reference to the result of React.createElement() but it seems to be an antipattern. Also I'm using the ReactJS.NET library to handle server-side rendering for me so the whole React.render line is generated and is hard to modify.

My other idea was to create a mixin that makes the ponent explicitly expose itself on mount, like:

var ActiveComponents = [];
var debugMixin = {
    ponentDidMount: function () {
        var id = this.getDOMNode().id;
        ActiveComponents[id] = {
            id: id,
            getState: () => { return this.state; },
            setState: (state) => { this.setState(state); },
            p: this
        };
    }
};

Are there drawbacks for an approach like this? Is this the same antipattern mentioned above?

Although being much cleaner than entangling these test hooks in the ponent code directly, adding a mixin is still a modification, and I would like to avoid that if possible.

The questions I hope to get answers for are bolded.

• javascript
• console
• reactjs

Share Improve this question Follow asked Jul 3, 2015 at 15:17 vinczemartonvinczemarton 8,19677 gold badges5959 silver badges8989 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 2

A workaround for this is to assign your object to the window object:

window.myStateObject = myStateObject

and then you can inspect it in the console:

window.myStateObject

There is a ReactJS extension for Chrome that may meet your needs https://chrome.google./webstore/detail/react-developer-tools/fmkadmapgofadopljbjfkapdkoienihi

If that isn't good enough, React keeps track of all the mounted ponents in a private variable instancesByReactID. If you just want to access these for debugging, you could modify the React code and expose that variable as a global.

本文标签： Find and manipulate a Reactjs component from the JavaScript consoleStack Overflow