原生实现v-html

要在React中实现Vue中的v-html效果，可以使用dangerouslySetInnerHTML属性。这个属性可以直接将HTML字符串插入到React组件中。使用原生操作，可以通过useState来存储HTML字符串，并在函数组件中使用dangerouslySetInnerHTML来渲染这个字符串。下面是一个示例代码：

import React, { useState } from 'react';

function App() {
  let [htmlString, setHtmlString = useState("<h1>hello world</h1>");

  return (
    <div dangerouslySetInnerHTML={{ __html: htmlString }}></div>
  );
}

export default App;

在这个示例中，我们使用useState来定义一个名为htmlString的状态变量，并将初始值设置为"<h1>hello world</h1>"。然后，在组件的返回部分，我们使用dangerouslySetInnerHTML属性来渲染这个htmlString变量的内容。

需要注意的是，在使用dangerouslySetInnerHTML属性时，需要将HTML字符串包装在一个对象中，并将该对象传递给dangerouslySetInnerHTML属性的__html属性。这是为了强调这是一个有意为之的危险操作，需要小心使用。<span class="em">1</span><span class="em">2</span><span class="em">3</span>
#### 引用[.reference_title]
- *1* *2* [在React中实现Vue中的v-html效果](https://blog.csdn.net/weixin_53452096/article/details/119042629)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
- *3* [原生java影视app源码 对接苹果cms](https://download.csdn.net/download/weixin_36643308/88250409)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v93^chatsearchT3_2"}}] [.reference_item style="max-width: 50%"]
[ .reference_list ]