1

With previous versions of AngularJS one could trace the $scope of a controller by reaching it with document.querySelector and then accessing a specific node on the DOM.

I wonder, is this possible with ReactJS somehow?

If I reach the class' root DOM element, can I have access to it's state or setState methods?

To make my intention clearer, I plan to build a guidance tool for our web application. For this, I want to control the app from the DOM without any access to the compiled ReactJS code. That is why I would like to check the option to control it via this method.

Guy
  • 12,488
  • 16
  • 79
  • 119
  • You pass state down from parent to children with props. – Omar Aug 27 '18 at 21:07
  • The state is stored in the class. For what do you need it? For debugging, you can install the React Developer Tools browser extension and watch the state in there. – JJJ Aug 27 '18 at 21:13
  • Perhaps I should refine the question. My intention is to access the state of a class from the DOM rather than from the ReactJS code. For instance to load a ReactJS website and than access the state from the console. – Guy Aug 27 '18 at 21:18
  • 1
    @Guy React devtool extension will let you do... with dev build – Arup Rakshit Aug 27 '18 at 21:20
  • 1
    That is a good direction - to look in their source code and see how they accomplish that. I will try to investigate. – Guy Aug 27 '18 at 21:23

2 Answers2

0

In React, every component has his own state you can setState within a component only but you can store it in redux state to be accessible from everywhere. Redux and Context API are primal choices for react state management.

Even you can pass one component’s state as props to children components. But we use redux or context API to avoid prop drilling caveat.

There’s nothing in comparison to react official docs to understand react component’ state.

here is the great resource to understand how to access react state out of the component

Sakhi Mansoor
  • 7,832
  • 5
  • 22
  • 37
  • Your answer refers to accessing the state from *within* React. What I am trying to do is access the state from *outside* React - aka the DOM. – Guy Aug 27 '18 at 21:19
  • I have added a resource in my edited answer. You will surely get what you want. – Sakhi Mansoor Aug 27 '18 at 21:25
  • 1
    Thanks, I have just read the article. Though it seems this might work, I have two concerns. First it requires me to add refs to the entire component tree (if I understand it correctly). Secondly, I have a slight feeling this approach may lead to memory leaks. From my experience if you connect DOM to data structures blindly (without cleaning after yourself) especially with a shadow DOM framework, you might keep memory blocks referenced and thus unfreed. – Guy Aug 27 '18 at 21:37
  • Yes refs are easiest way to access react components and easier to maintain. You can utilise the power componentWillUnmount() to defer all updates in your component. Hence you won’t see any warnings in console. – Sakhi Mansoor Aug 27 '18 at 21:44
0

To make my intention clearer, I plan to build a guidance tool for our web application. For this, I want to control the app from the DOM without any access to the compiled ReactJS code.

IMHO this is a bad idea/requirement, not actual since 'react era' ;)

I did some POC with comments system build in. There was many tooltips-like elements filled with instructions and explanations (about options and possibilities).

Adding these texts was as simple as inserting component in render and set optional styling (position, alpha). They are set just in place, not externally referenced (keeping up to date) - better consistency, easy management. I even used i18next to have texts consistent with localised view.

I can show/hide all of them by global flag. They aren't really integrated, not interfering normal operations. You can 'remove it completly', changing component definition (globally, always render nothing) not touching places where it was used. Null renders to nothing in real DOM - virtual structures are cheap. Opposite change - extend with more complex actions (feedback/help options, remote assist) - is easy, too.

It will work the same way for react native.

Beside this in 'commented mode' I highlighted some component's borders to show structures.

Internal vs external? for own app? 10:2? ;)

xadm
  • 8,219
  • 3
  • 14
  • 25
  • I am aware of the consequences. For sure controlling the UI with redux actions, thunks or sagas or even simple state management would be much easier and more suitable to the library. However, I have no choice. It is a complex system and I would never get the approval to dig in and put the infrastructure needed for this. it will be dismissed as too risky. Either I find a way to do with DOM or I'll try to get approval for doing it with the store like this. https://stackoverflow.com/a/38461355/172815 – Guy Aug 28 '18 at 00:12
  • I would compare this to ` – xadm Aug 28 '18 at 01:23