如何将存储在变量中的原始html放入react组件中

将存储在变量中的原始HTML放入React组件中，可以通过使用React的dangerouslySetInnerHTML属性来实现。

dangerouslySetInnerHTML属性允许将HTML字符串直接插入到组件中，但需要注意安全性问题，因为它可以导致跨站脚本攻击（XSS）。因此，在使用dangerouslySetInnerHTML时，需要确保HTML字符串是可信的，或者进行适当的过滤和转义。

以下是一个示例代码，展示了如何将存储在变量中的原始HTML放入React组件中：

import React from 'react';

class MyComponent extends React.Component {
  render() {
    const htmlString = '<div>Hello, <strong>World!</strong></div>';

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

export default MyComponent;

在上述示例中，我们定义了一个变量htmlString，其中存储了原始的HTML字符串。然后，在组件的render方法中，通过将htmlString传递给dangerouslySetInnerHTML属性，将HTML字符串插入到组件中的div元素中。

需要注意的是，使用dangerouslySetInnerHTML属性时，需要使用双大括号{{}}将属性值包裹起来，因为它是一个对象。

此外，为了提高安全性，推荐使用腾讯云的Web Application Firewall（WAF）产品来保护网站免受各种网络攻击。WAF可以帮助检测和阻止恶意的跨站脚本攻击等安全威胁。

腾讯云WAF产品介绍链接：https://cloud.tencent.com/product/waf