Menu
var Klass = React.createClass({
this.props.html_string = '<button>BUTTON_TEXT</button>';
render: function(){
return (
<div className="wrapper">
{this.props.html_string}
</div>
);
}
});
Currently {this.props.html_string} gives me a text node. How can I make this a HTML DOM node?
978
To render the html string in react, we can use the dangerouslySetInnerHTML attribute which is a react version of dom innerHTML property. The term dangerously is used here to notify you that it will be vulnerable to cross-site scripting attacks (XSS).
Just use react-create-app template and the basic html (head, meta) things are already in place, Just modify the src dir to meet you needs. import React from 'react'; import './App. css'; // For Your CSS file class App extends React.
To repeat an element n times with React, we can use the Array function with the map array method. to create an array with 8 span elements with the same content by calling the Array with the n to create an empty array with n slots. Then we use the spread operator to make a copy of it.
React applies auto-escaping As a result, React will automatically ensure that data that ends up in the page will not cause XSS attacks.
What you want is dangerouslySetInnerHTML
https://facebook.github.io/react/tips/dangerously-set-inner-html.html
function createMarkup() { return {__html: 'First · Second'}; };
<div dangerouslySetInnerHTML={createMarkup()} />
Edit: you'll want to htmlencode the string.
166
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
