如何将字符串转换为React元素-ReactJs/Javascript

我包装了一个react html元素，如：

let elements = (
      <div>
        <div>dwewe</div>
        <div>wefwef</div>
        <span>yurhfjer</span>
      </div>

    );

let元素=(
德威
世界经济论坛
yurhfjer
);

现在我想将其传递给html属性，因此我使用以下方法将react元素转换为字符串：

<span data-tip-react={ReactDOMServer.renderToString(element)}>{title}></span>

{title}>

我现在可以访问这些元素，但是我希望将其转换回react元素（转换之前的方式） 以下是我所期望的o/p：

我尝试使用DOMParser，但是它返回了一个html元素，React不接受呈现，并抛出了一个errr:not a React元素

如何将字符串转换回相同的格式-React元素？？ 请帮忙！ 在此感谢您

以下内容：

您可以使用

危险的LysetinerHTML

（用于简单元素）或某些npm包：

class App extends Component {
  constructor() {
    super();
    this.state = {
      name: 'React'
    };
  }

  getDom() {
    return (
      <div>
        <div>dwewe</div>
        <div>wefwef</div>
        <span>yurhfjer</span>
      </div>
    );
  }

  convertToString(dom) {
    console.log("To String", ReactDOMServer.renderToString(dom))
    return ReactDOMServer.renderToString(dom)
  }

  convertToDOM(string) {
    let domparser = new DOMParser();
    console.log("To Dom", domparser.parseFromString(string, 'text/html'))
    return domparser.parseFromString(string, 'text/html')​​
  }

  render() {
    return (
      <div>
        <Hello name={this.state.name} />
        <p>
          Start editing to see some magic happen :)
          {<div dangerouslySetInnerHTML={{__html: this.convertToString(this.getDom())}}></div>}
        </p>
      </div>
    );
  }
}

类应用程序扩展组件{
构造函数（）{
超级（）；
此.state={
名称：“反应”
};
}
getDom（）{
返回(
德威
世界经济论坛
yurhfjer
);
}
convertToString（dom）{
log（“To String”，ReactDOMServer.renderToString（dom））
返回ReactDOMServer.renderToString（dom）
}
convertToDOM（字符串）{
让domparser=newdomparser（）；
log（“To Dom”，domparser.parseFromString（string，'text/html'））
返回domparser.parseFromString（字符串'text/html'）​​
}
render（）{
返回(

开始编辑以查看发生的奇迹：）
{}

);
}
}

---

例如：

你能展示这部分吗

我尝试过使用DOMParser，但是它返回了一个html元素，React不接受呈现，并抛出了一个errr:not a React元素

谢谢你的解决方案：这就是我为DOM purify所做的尝试：

让parser=new DOMParser（）；让parsedHtml=parser.parseFromString（htmlContent，'text/html'）

并尝试将其呈现为react html，我得到以下错误：错误：对象作为react子对象无效（找到：具有键{uu html}的对象）。如果您打算呈现一组子对象，请改用数组。另外，是否有其他方法可用于使用

危险的SytinenerHTML

，这很容易受到xxs攻击，我们正在应用程序中起诉sanitize以净化任何html标记字符串。因此，我确信这是否可行（@user1234抱歉耽搁了，你还有问题吗？如果有，你能做一个快速的stackblitz以便更容易理解吗？那么快速的方法是使用类似

react jsx parser

的东西，或者使用类似babel的工具手动转换为react代码