How to render html string to dom, like what we do dangerouslySetInnerHTML in react?

[c7h12]

I am tring nana-jsx in my new project, and meet with a predicament to render html string to dom.
Any ideas?

[yandeu]

I have never used dangerouslySetInnerHTML.

Can you show me your use case?

[c7h12]

The data i got is some html strings, like let title = '<span style="color: red;">Big News</span> xxx',
and i need to render it to h1, <h1>{title}</h1>
Nano.renderSSR() works well, and when Nano.hydrate() in browser, it becomes text;

[yandeu]

Try:

import { jsx } from 'nano-jsx/lib/jsx'

const App = () => {
  let title = jsx`<span style="color: red;">Big News</span> xxx`
  return <h1>{title}</h1>
}

[c7h12]

@yandeu Thanks, It helps.

import { jsx } from 'nano-jsx/lib/jsx'

const HtmlContent = ({html})=>{
  return <Fragment>{jsx([html])}</Fragment>
}


const App = ()=>{
  const html = '<span style="color: red;">Big News</span> xxx';
  return <h1><HtmlContent html={html}/></h1>;
}