如何将字符串转换为 JSX 以在 React 中使用

Question

I have some JSX format strings which are saved into the database. Now I want to convert them to the JSX again. For example:

let a = "<TestComponent />"; // String is loaded from database
ReactDOM.render(
    a,
    document.getElementById('root')
);

How could it be possible?

Answer 1

You can use dangerouslySetInnerHTML like this:

let a = "<TestComponent />"; // String is loaded from database
function createMarkup() {
  return {__html: a};
}

function MyComponent() {
  return <div dangerouslySetInnerHTML={createMarkup()} />;
}

ReactDOM.render(
  a,
  document.getElementById('root')
);