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
- Styled Component only applying style to nested selector
- state not updating in child component - react js
- Edit action in react-redux
- edit and update table cell dynamically in react
- How tu turn this function into a thunk react promise function (Updated)
- Drawing a left Border for the whole border in material ui Tables
- reactjs createRef not work in component arrays
- React CSS Transition not working and classes never getting applied
- In Mui Autocomplete how to call a function after selecting an option (not simultaneously)
- NextJS: Use same component in multiple routes for multiple pages
- Accessing a file through JSON object?
- Fetch in React Uncaught (in promise)
- Ant Design & React Testing Library - Testing Form with Select
- In React Hooks. How to set state to a random number and use that to display a string from an array
- Displaying filtered data in React
- React How to pass hook value to CreateContext
- React - member function is not a function when called in initial state (outside constructor)
- How to write HOC for React Apollo Query component in TypeScript?
- How can I add compoent to another component in React?
- How to access the props from server-side rendering when re-render the component in client side?
- Distributed Reactjs routing as in Angularjs
- Why does the queryString value accumulate behind the url when using a history object in response in react?
- Why PropTypes failed with Value is undefined
- Make counter not be less than zero in React.js
- react all classNames are affected in map()
- How to fill users variable with data from GET request in React
- How to Double Click Toggle visibility of React Component?
- Why does my function on the server return true but returns false on the client side in Meteor.js
- How to pass a function from a component to another component in react
- Why didn't store.subscribe() fire after state got updated?