React JS 如何使用innerHTML

在本篇文章中，我们将学习如何在React JS中使用InnerHTML。我们可以通过使用’dangerouslySetInnerHTML’属性来将HTML添加到ReactJS中。正如其名字所示，这是危险的，因为它直接将HTML注入到你的React组件中，从而可能导致安全问题和其他操作问题。它还可能增加诸如跨站脚本攻击（XSS）之类的风险。

先决条件

React的介绍
React组件
React Hooks
NPM或NPX

创建React应用的步骤

步骤1： 使用以下命令创建一个React应用。

npx create-react-app foldername

步骤2： 在创建项目文件夹即foldername之后，使用以下命令移动到该文件夹。

cd foldername

项目结构：

React JS 如何使用innerHTML

示例： 在这里我们正在创建一个名为’HTML’的组件，在其中我们创建了一个常量，并将一个HTML元素存储为值，并将该值传递给div元素以进行dangerouslySetInnerHTML。这样，我们就可以将该HTML插入到我们的Reactjs组件中并在屏幕上呈现它。然后，我们将’HTML’组件导入到App.js文件中，它将呈现到屏幕上。

//HTML.js 
import React from 'react'; 
  
function HTML() { 
    const htmlContent =  
        `<div> 
            <h3> 
                GeekForGeeks 
            </h3> 
            <p> 
                innerHTML in reactjs 
            </p>  
         </div>`; 
  
    return ( 
        <div> 
            <div dangerouslySetInnerHTML={ 
                { __html: htmlContent } 
             } /> 
        </div> 
    ); 
} 
  
export default HTML;

//App.js 
  
import './App.css'; 
import HTML from './HTML'; 
function App() { 
    return ( 
  
        <div className="center"> 
            <HTML /> 
        </div> 
  
    ); 
} 
  
export default App;