如何从存储在字符串变量中的代码呈现 React 组件？

如何解决如何从存储在字符串变量中的代码呈现 React 组件？

`class Snippet extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      todos: [],}
      }
  onTodoChange = (event) => {
      this.setState({ todos: [...this.state.todos,this.state.todo],todo: ""})
    }
    onSave = () => {
      this.setState({ todos: [...this.state.todos,todo: ""})
    }
    render() {
      return (
        <div>
        <input onChange={this.onTodoChange}
        value={this.state.todo}
        placeholder="Enter a todo" />
        <button onClick={this.onSave}>Save todo</button>
        {this.state.todos.map((todo,index) => <p>{todo}</p>)}
        </div>
      )
   }

}`

上面的代码（一个类）作为字符串存储在变量“result”中，该变量是一个 React 状态。

我想将此代码从字符串呈现到网页。

我希望能够以这种方式调用这个组件：

<Snippet />

或者任何其他方式将字符串中的代码呈现到网页上。

如果您需要任何其他说明，请告诉我。非常感谢您的意见。