score:346
yes there is a difference!
the immediate effect of using innerhtml
versus dangerouslysetinnerhtml
is identical -- the dom node will update with the injected html.
however, behind the scenes when you use dangerouslysetinnerhtml
it lets react know that the html inside of that component is not something it cares about.
because react uses a virtual dom, when it goes to compare the diff against the actual dom, it can straight up bypass checking the children of that node because it knows the html is coming from another source. so there's performance gains.
more importantly, if you simply use innerhtml
, react has no way to know the dom node has been modified. the next time the render
function is called, react will overwrite the content that was manually injected with what it thinks the correct state of that dom node should be.
your solution to use componentdidupdate
to always ensure the content is in sync i believe would work but there might be a flash during each render.
score:1
yes there is a difference b/w the two:
dangerouslysetinnerhtml
: react diffing algorithm (https://reactjs.org/docs/reconciliation.html) is designed to ignore the html nodes modified under this attribute thereby slightly improving the performance.
if we use innerhtml
, react has no way to know the dom is modified. the next time the render happens, react will overwrite the content that was manually injected with what it thinks the correct state of that dom node should be.
that's where componentdidupdate
comes to rescue!
score:3
based on (dangerouslysetinnerhtml).
it's a prop that does exactly what you want. however they name it to convey that it should be use with caution
score:19
according to dangerously set innerhtml,
improper use of the
innerhtml
can open you up to a cross-site scripting (xss) attack. sanitizing user input for display is notoriously error-prone, and failure to properly sanitize is one of the leading causes of web vulnerabilities on the internet.our design philosophy is that it should be "easy" to make things safe, and developers should explicitly state their intent when performing “unsafe” operations. the prop name
dangerouslysetinnerhtml
is intentionally chosen to be frightening, and the prop value (an object instead of a string) can be used to indicate sanitized data.after fully understanding the security ramifications and properly sanitizing the data, create a new object containing only the key
__html
and your sanitized data as the value. here is an example using the jsx syntax:
function createmarkup() {
return {
__html: 'first · second' };
};
<div dangerouslysetinnerhtml={createmarkup()} />
read more about it using below link:
documentation: react dom elements - dangerouslysetinnerhtml.
score:26
you can bind to dom directly
<div dangerouslysetinnerhtml={{__html: '<p>first · second</p>'}}></div>
Source: stackoverflow.com
Related Query
- React.js: Set innerHTML vs dangerouslySetInnerHTML
- Does react will convert html snippets set in dangerouslySetInnerHTML to virtual DOM?
- Dangerously Set innerHTML React
- Changing image source property of a child with dangerously set innerhtml parent attribute in React
- Add React component in HTML set by dangerouslySetInnerHTML
- Set types on useState React Hook with TypeScript
- How to set component default props on React component
- How to set the DefaultRoute to another Route in React Router
- How to set image width to be 100% and height to be auto in react native?
- React Native: JAVA_HOME is not set and no 'java' command could be found in your PATH
- How to set iframe content of a react component
- Using immutability-helper in React to set variable object key
- Set loading state before and after an action in a React class component
- Is it possible to set a className on custom react components?
- How to set up Babel 6 stage 0 with React and Webpack
- React props - set isRequired on a prop if another prop is null / empty
- set initial react component state in constructor or componentWillMount?
- How to set state of response from axios in react
- Accessing Redux Store from routes set up via React Router
- Reading an environment variable in react which was set by docker
- How to set React to production mode when using Gulp
- Making an HTML string from a React component in background, how to use the string by dangerouslySetInnerHTML in another React component
- Set React Input Field Value from JavaScript or JQuery
- Set React component state from outside of component
- How to set NODE_ENV from package.json for react
- How to set React component state and props from browser
- React Native: How to set <TextInput/>'s height and width to <View/> container?
- How to set color to text in React JS
- How can I set initial React state from API data?
- How do I set a marker in MapView of React Native
More Query from same tag
- react reducer update issue with objects
- React: How do I handle routing for language selection
- Passing an object from one component to another using props
- How to control meteor data stream with react?
- Redirect to 404 page does not work correctly
- React js audio object not playing - The media resource was not suitable
- How to focus text input on transition end?
- React Date Picker color effect on hover and set date range
- Routes on React, TypeError: Cannot read property 'getCurrentLocation' of undefined(…)
- how to update my current route state if component did update
- How to fix 'First visit render data isn't accessible, but after second visit it is accessible for rendering' error in React-Redux
- How to create a Protected Route with Promises
- Getting undefined for the property passed to the child component
- ReactJS + javascript: How to parse array into a new array?
- React: How to populate the Input field with one of the traversed searched value?
- Show/Hide a component in React using state
- Chakra UI for React: change _focus borderColor not work
- Passing a Request from React.JS front-end to C# back-end (ASP.NET) using HTTP Post (RESTful API)
- TypeError: Cannot read property 'find' of undefined in React-redux while running a test
- How to put paragraph into svg background
- Is there is way to set pagination arrows to be enabled even there is no data?
- async load iframe in react
- How to have sub components CSS class react on parent components CSS class?
- How to list 4 products on every page using ant design Pagination component in react js?
- What is the most accurate way to check if you are in rails server process for the needs of Hyperstack
- ReactJS | Setting up Development Environment
- Hiding parent react component, when you click on a child component
- Continously getting undefined error in React and amplify
- How to split one Redux reducer into multiple smaller ones
- How can a parent alter props for a child component in react?