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.
Related
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
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.
if react-dom is specifically geared for rendering html elements and react-native renders native views...
Lets say I have an xml type language and I want to use react / jsx to declaratively compose components that have there own native elements.
How do I create base elements (not divs or spans but something else)
How can I get a react component to run its lifecycle method without using ReactDom.render
any resources out there that I can study?
Thanks in advance
You can checkout the tutorial by Nitin Tulswani on writing a custom react renderer.
I just want to do something simple like:
ReactDOM.find('img')
I can't seem to find anything in the documentation that does this. Do I just need to use jQuery? In my componentDidMount method, I want to add a listener to all img tags.
React does not have wrappers for convenient DOM access / DOM manipulation similar to jQuery because React recommends against having to access the DOM at all.
The DOM should be treated just as a rendering layer, not as a data store - your application state should entirely reside in javascript. Hence you never need to either access the DOM nor query it.
I am new to ReactJs and I am not sure where and how should I define Layout for components. Specifically I want my SideBar Header and Footer remain sticky and using react-router-dom I want to mount rest of the components at appropriate places whenever needed (click on sidebar item)? So should I render multiple components together or there is a another way to first define the layout and then render components at predefined places ?
For dynamic components, use css to lay them out on different pages and render them at once by calling them under render of that main big component. This would make could modular and non-redundant too.
Refer this github , I found it good for referral.
https://github.com/airbnb/react-sketchapp
For the quick layouts you can use bootstrap templates. ( This can help you get started)
https://getbootstrap.com/docs/4.0/examples/