使用React变量语句(JSX)插入HTML

2020/10/14 18:01 · javascript ·  · 0评论

我正在用React构建一些东西,我需要在JSX中插入带有React变量的HTML。有没有办法像这样一个变量:

var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';

并像这样将其插入反应中并起作用?

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

并按预期插入HTML吗?我还没有看到或听到任何有关可以执行此内联的react函数的信息,也没有听说过任何使之能够工作的解析方法。

您可以使用dragonallySetInnerHTML,例如

render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: thisIsMyCopy}}></div>
    );
}

请注意,dangerouslySetInnerHTML如果您不知道要注入的HTML字符串中的内容,则可能很危险。这是因为可以通过脚本标签注入恶意的客户端代码。

如果您不是100%确定要渲染的HTML是XSS(跨站点脚本)安全的,则最好通过DOMPurify之类的工具清理HTML字符串是个好主意

例:

import DOMPurify from 'dompurify'

const thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content" dangerouslySetInnerHTML={{__html: DOMPurify.sanitize(thisIsMyCopy)}}></div>
    );
}

危险地,SetInnerHTML有很多缺点,因为它在标记内设置。

我建议您使用一些反应包装,例如我在npm在这里找到的包装。
html-react-parser执行相同的工作。

import Parser from 'html-react-parser';
var thisIsMyCopy = '<p>copy copy copy <strong>strong copy</strong></p>';


render: function() {
    return (
        <div className="content">{Parser(thisIsMyCopy)}</div>
    );
}

很简单 :)

通过使用''它使它成为字符串。使用不带反逗号的它将正常工作。

为了避免棉绒错误,我可以这样使用它:

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }
import { Fragment } from 'react' // react version > 16.0

var thisIsMyCopy = (
  <Fragment>
    <p>copy copy copy&nbsp;
    <strong>strong copy</strong>
    </p>
  </Fragment>
)

通过使用''将值设置为字符串,React无法知道它是HTML元素。您可以执行以下操作以使React知道它是HTML元素-

  1. 删除'',它将起作用
  2. 使用<Fragment>返回一个HTML元素。

如果您不希望以上任何一种,请尝试Fragment

就您而言,我们可以写

import React, {useState, Fragment} from 'react'

const thisIsMyCopy = Fragment('<p>copy copy copy <strong>strong copy</strong></p>')

render: function() {
    return (
        <div className="content">{thisIsMyCopy}</div>
    );
}

如果您使用钩子想要将其设置为任何条件的状态

const [thisIsMyCopy, setThisIsMyCopy] = useState(<Fragment><p>copy copy copy <strong>strong copy</strong></p></Fragment>);

如果还有其他人落在这里。使用ES6,您可以像这样创建html变量:

render(){
    var thisIsMyCopy = (
        <p>copy copy copy <strong>strong copy</strong></p>
    );
    return(
        <div>
            {thisIsMyCopy}
        </div>
    )
}

您还可以像这样在ReactDOM中包含以下HTML:

var thisIsMyCopy = (<p>copy copy copy <strong>strong copy</strong></p>);

ReactDOM.render(<div className="content">{thisIsMyCopy}</div>, document.getElementById('app'));

这是来自React文档的两个链接linklink2,可能会有所帮助。

本文地址:http://javascript.askforanswer.com/shiyongreactbianliangyujujsxcharuhtml.html
文章标签: ,   ,   ,   ,  
版权声明:本文为原创文章,版权归 javascript 所有,欢迎分享本文,转载请保留出处!

文件下载

老薛主机终身7折优惠码boke112

上一篇:
下一篇:

评论已关闭!