在危险的SetInnerHTML反应组件中使用state

Question

I have a string about html builded by react. I'm trying to implement render this html string through react, and looking for solution to manage state.

below is simple example.

const App = (props) => {
  let code = '<b>Will This Work?</b>';

  return (
    <div dangerouslySetInnerHTML={ {__html: code} }>
    </div>
  );
}

I want to manage the state of component rendered with dangerouslySetInnerHTML option.

Can i get any ideas about how approach?

Answer 1

What is dangerouslySetInnerHTML?

It is a way to set the children of the component (as text/html).

Can state be used in it?

Yes state can be used with it; However, the innerHTML MUST be vanilla HTML, NOT JSX. An example of this can be seen below: (click the button to change the state from text to a red div)

The way this is working is because the state can be inserted into a string literal which will then be handled as HTML encoded text.

 const App = (props) => { const [state,setState] = React.useState("something I set with state"); let code = `<b>Will This Work? ${state}</b>`; return ( <React.Fragment> <button onClick={()=>{setState("<div style=\"background-color: red; width:50px; height:50px;\"><div>")}}>Click to change state from pure text to an html element</button> <div dangerouslySetInnerHTML={ {__html: code} }> </div> </React.Fragment> ); } ReactDOM.render( <React.StrictMode> <App /> </React.StrictMode>, document.querySelector('.react') );

 <script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script> <script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script> <div class='react'></div>

Should you do this?

Probably not. There is a reason it is called dangerouslySetHTML and not safelySetInnerHTML. See more in the React Docs