React DOM Elements
React DOM Elements
React implements a browser-independent DOM system for performance and cross-browser compatibility.
checked
This is useful for building controlled components.
The checked attribute is supported by 'input' components of type checkbox or radio.
className
To specify a CSS class, use the className attribute, this applies to all regular DOM and SVG elements like <div>, <a>, and others.
dangerouslySetInnerHTML
dangerouslySetInnerHTML — Is React’s replacement for using innerHTML in the browser DOM.
Setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack, so, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.
htmlFor
onChange
The onChange event behaves as you would expect it to: whenever a form field is changed, this event is fired.
selected
You can use it to set whether the component is selected. This is useful for building controlled components.
style
const divStyle = {
color: 'blue',
backgroundImage: 'url(' + imgUrl + ')',
};
function HelloWorldComponent() {
return <div style={divStyle}>Hello World!</div>;
}
The style attribute accepts a JavaScript object with camelCased properties rather than a CSS string.
This is consistent with the DOM style JavaScript property, is more efficient, and prevents XSS security holes.
suppressContentEditableWarning
Normally, there is a warning when an element with children is also marked as contentEditable, because it won’t work. This attribute suppresses that warning.
suppressHydrationWarning
If you use server-side React rendering, normally there is a warning when the server and the client render different content, if you set suppressHydrationWarning to true, React will not warn you about mismatches in the attributes and the content of that element. .
value
Related concepts
- Handling Events
- Ref: Adding a Ref to a DOM Element
- Ref: Callback Refs
- The Diffing Algorithm: DOM Elements Of The Same Type
- ReactDOM: findDOMNode()
- ReactTestUtils: scryRenderedDOMComponentsWithClass()
- ReactTestUtils: scryRenderedDOMComponentsWithTag()
- React DOM Elements: checked
- React DOM Elements: className
- React DOM Elements: dangerouslySetInnerHTML
- React DOM Elements: htmlFor
- React DOM Elements: onChange
- React DOM Elements: selected
- React DOM Elements: style
- React DOM Elements: suppressContentEditableWarning
- React DOM Elements: suppressHydrationWarning
- React DOM Elements: value