I am aware of React Test Utils that can be used to simulate events when testing, however I have a browser extension that doesn't have access to the context of the page. I would like to be able to interact with the DOM (click events and filling out fields), however it seems that the state is not updated by a page running with ReactJS. Is there a way to this at all?
Related
There're two component developed in two different application.
One is App. Another one is MFE1.
In real world we have MFE2, MFE3, MFE4...etc. And App is just a container.
We will load different MFE into App using ReactDOM.render(Match by id).
The whole thing is actually working fine but there's only one existing issue.
We cannot find a way to unrender MFE1 when its container is unrendered.
I tried to call unmountComponentAtNode inside the useEffect callback of the App container.
However since the DOM is already gone at this point so we cannot use this method.
At its simplest level, my question is how can I unrender the MFE1 when/after I unrender its container?
I have created a sandbox to simulate the issue.
https://codesandbox.io/s/zealous-black-7swzbt
Inside the sandbox, I already implemented the way we load these MFE1 into App.
There's two buttons inside the sandbox.
Button switch mfe simulate the way we switch between different MFEs.
When you click it, you will see the MFE1 is invisible in the page, however it is not unrendered yet since the console.log("MFE1 is unrendered") is not called.
Button unmountComponentAtNode simulate the expected behavior, you can see MFE1 is invisible in the page, also the console.log("MFE1 is unrendered") is called. However I cannot use it inside the useEffect callback...
Can you show me how to re render Flatlist on refresh? I use SQLite database for my local database and I have two pages one for display all workers and one for create worker. How I re render automatically page for display all workers when I create new Worker (live reload/refresh)?
Depending on the requirements of your application, the most easiest solution would be to use the get method you're using to pull data from your application as soon as the user presses the create worker button and update your data array in your state or props (preferably props). React Native will always re-render if it detects a change within the state or props.
One issue with the above method is, it will refresh for the current user, but imagine a different user is using the app too, it won't live refresh for them unless they refresh the component themselves (this could be tabbing in and out of the page).
One work around would be to use Socket.io (https://socket.io/), to build a truly real-time application, Socket.io would allow you to listen for changes from all users and send an update request to all users which in turn should refresh their applications depending on the changes.
EDIT:
Add the below method to your WorkersView class, assuming it is different from your createWorker screen then the WorkersView screen will update every time a user enters the screen.
componentDidMount() {
this.props.navigation.addListener('willFocus', this.getAllWorkers);
}
Note: I would recommend using a storage system like Redux or AsyncStorage, then you can communicate information across all your screens more efficiently and effectively.
I'm currently facing an issue with Google Optimize, Application is build on Meteor React Redux, if there is any way to trigger Google Optimize experiment or any tag on click event in child or parent component, experiments are getting triggered on URL basis but, I'm not to add variation for click event at component level.
Suppose there is Cart button on clicking Cart button slider will open in same page, I have to apply Google Optimize experiment for the slider component.
Thanks in advance.
There are two key steps you need to take, to make this experiment work.
First, you have to set up the experiment triggers. By defeault, experiments start on page load, but this can be changed to so called custom events. Further details are available here.
Second, you need to dispatch this same command, when the relevant event (click on the Cart button in your case) has happened. More precisely, you need to send this event into the datalayer, using the following command.
dataLayer.push({'event': 'optimize.activate'});
You can customize this event name at the Optimize settings. In this case, the event in the datalayer call has to be aligned.
The question here is not about is this a good idea or not, because there is a real use-case : I'm scraping a specific website from a headless browser for an internal service and I need to extract data from react.
From an active production application, I would like to retrieve props from the root component using only "pure" JavaScript. The only thing I got is a div right now.
The constraints are:
It must be done using pure JavaScript (or using standard React lib)
I cannot add/setup react-devtools extensions or things like that
So far I could always hack into an event handler that I would trigger to manage to enter into React context but I'm looking for cleaner alternatives, any ideas?
I'm facing some issues when rendering a React component into the shadow DOM of a webcomponent.
I wrote a small piece of code to turn a React component into a webcomponent, but I want to render the
React component inside the shadow DOM of the webcomponent. But in that case, it seems that React is not able to catch UI events (click, keyPress, etc ...) anymore.
Let's take an example, let say that I have a first webcomponent <awesome-timer /> that render the React component inside the webcomponent node, and another webcomponent <less-awesome-timer /> that render the React component inside the shadow DOM of the webcomponent.
Both webcomponents use the same React component. However the one rendered inside the shadow DOM does not work, because click events on the button of the timer component does not trigger the bound function.
I guess React is not designed to handle such case, but I'd love to get more details about it.
The code of the example is available here : https://gist.github.com/mathieuancelin/cca14d31184bf4468bc1
Does anyone have an idea about it ?
I know this is kinda late but, I believe your issue when you pass any attributes to a web component they instantly become strings Because that's all you can pass to a web component. Now of course you can convert or cast them back to there original data type, except functions because once stringified they loose there scoping, lexical and all.
Now to your main question, you are were trying to pass you child element through the Main web components slot. Now you have to remember that once you pass anything to a web component you now have to use the webs components methods and return types to manage whatever you pass. So yes passing react into a web component will not work they you expect.
You will need to go back to whatever tool you use to build your web component and deal with the slot logic there. Since this is a very old post as are web components. You might not have had access to the modern web component build tool's we have today. I found Stenicl allows you to build and manage your web components in Typescript.
A good option is to change your pattern a little bit and just return web components from your react app.
Or you can use another really cool to call Lit-HTML or Lit-element. I believe they may have combined there core libraries. Anyway these tool will allow you to combine Reactjs and web components where lit-html gives you access to methods simial to Reactjs's life cycle methods. Anyway some good stuff to check out if your stuck at this point.