For class Components in React, I could use
ReactDOM.findDOMNode(<instance-of-outermost-component>).getElementsByClassName('snap')
to get all the elements with className snap, but It doesn’t work with function components. How can I get all the elements with the same Classname in function components?
You should not really be accessing the DOM like that with React- unless you are using it within a testing framework. But even then you would not be accessing the DOM through ReactDom.
What are you trying to actually do when accessing the classes like that?
To apply changes in React you would want to be using state and then conditionally apply these to components. It seems like you are trying to apply a practice common in vanilla javascript development or even something like jQuery.
I think you would benefit from going through this demo of how state can be used: react state tutorial
Related
I am working on a React project that was built primarily using React Class Components. Recently, the team decided to begin pivoting to functional components with hooks.
Is there a way for functional and class components to access the same contexts? In other words, if I have a context provider that is set up as a class/consumed by class components, can I then use a down-stream functional component to access and update that context?
The same question goes the other way (setting up provider to use useContext() hook and accessing it through a class component)
I have seen a lot online about "how to use context api," but have yet to see one that combines them instead of simply explaining the two ways to use context.
You can still use context in class based components.
Better still, just turn the particular component you're trying to refractor to a function based component.
Doesn't necessarily mean to rewrite the code.. just change things like the the class to const and the name of the component.
Next remove the render method and leave only the return.
Every other thing like the creating functions can be done above the return and inside the component body like regular functions.
I want to use react as a js library injected into my html page. like JQuery, to access DOM and manipulate it. In Vue.js we can do this but in react I doubt it works. I can't access DOM out of react Component and render method.I want a solution to access elements out of render method
You can make use of ref callback to access the dom element in react, which is what React Docs recommend to follow..
DOCS
You can use plain native JavaScript, for eg. document.querySelector() in any lifecycle function of React as well as in render().
Can you give an example of what you're trying to do exactly?
I made simple React component with some images that I want to animate as they are shown in viewport. To use getboundingclientrect() method I have to pass an element so I used js querySelectorAll('img') in componentDidMount() where my scrollEventListener is. It doesn't feel like the right way to go (although works fine). Is there more 'Reactish' solve for that problem?
Yes, you need to use Refs.
With React, usually you shouldn't have to use native dom selectors. By using refs it stays in the React scope and you'll have a more robust workflow.
I am using react-bootstrap for 'atom' level components in my react app and I want to pass HTML5 data-* attributes to those component and even though I do pass them in my react-bootstrap component ( Button in my case) they do not show up and when I inspect them and hence I am not able to use them
Now Is there a way to do that? I have went through their documentation but there is no clue as to how to do that?
DOM attributes that use data-* will not be altered in React.
There are stricter rules around non-data attributes as of React 16, but as you can read here, the data-attributes are left in.
With React Bootstrap, certain elements have had issues receiving data-attributes, if they map to say a list of items. If you show your JSX it might make diagnosing easier.
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.