Javascript 使用React和allow编辑呈现模板字符串

我有一个由服务器生成的电子邮件模板体（html）。模板中有一个我想在React组件中进行编辑的部分。简化后，模板如下所示：

<div class="message">
  <p>Hello!</p>
  <p>Welcome to our app... blah blah</p>
  <div class="user-customisable"></div>
  <p>Yours, app support</p>
</div>

你好!

欢迎使用我们的应用程序。。。废话

您的，应用程序支持

在我的前端应用程序中，我希望呈现最后一封电子邮件中显示的模板（我可以使用

DangerouslySetinerHTML

），但我也希望

user customizable

div可编辑，以便管理员可以添加自定义消息

---

我需要能够添加一个textarea或contenteditable属性，并将其连接到状态，但我不知道如何进行，任何指针都将不胜感激

如果我理解正确，您需要按原样显示此HTML，并且仅使用户可自定义div可编辑。如果是这样，您可以使用所需的逻辑使React组件，并使用

ReactDOM.render（…，document.querySelector（“.message.user Customizable”））将其链接到此div

如果您想使所有静态

message

div都可编辑，则需要将React组件直接渲染到此div中（使用

ReactDOM.render（…，document.querySelector（“.message”）

，但您需要确保React组件生成的HTML与静态HTML相同。您可以使用不同的同构方法使其可靠。将这些HTML作为组件的子级呈现，如..

{YourHtml}