Question

我正在使用React构建一些东西，我需要在JSX中使用React Variables插入HTML。有没有办法让变量像这样：

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

并将其插入反应中，让它有效吗？

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

并按预期插入HTML？我还没有看到或听到任何有关可以执行此内联的反应函数的信息，或者解析可以使其工作的事物的方法。

Answer 1

您可以使用dangerouslySetInnerHTML，例如

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

Answer 2

请注意，如果您不知道正在注入的HTML字符串中的内容，dangerouslySetInnerHTML会很危险。这是因为恶意客户端代码可以通过脚本标记注入。 / p>

如果您不是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>
    );
}

Answer 3

通过使用''，你将它变为字符串。使用没有引号可以正常工作。

Answer 4

为了避免linter错误，我这样使用它：

  render() {
    const props = {
      dangerouslySetInnerHTML: { __html: '<br/>' },
    };
    return (
        <div {...props}></div>
    );
  }

Answer 5

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元素-

删除''，它会起作用
使用<Fragment>返回HTML元素。

Answer 6

您不需要任何特殊的库或“危险”属性。您可以只使用React Refs来操作DOM：

class MyComponent extends React.Component {
    
    constructor(props) {
        
        super(props);       
        this.divRef = React.createRef();
        this.myHTML = "<p>Hello World!</p>"
    }
    
    componentDidMount() {
        
        this.divRef.current.innerHTML = this.myHTML;
    }
    
    render() {
        
        return (
            
            <div ref={this.divRef}></div>
        );
    }
}

可以在此处找到工作示例：

https://codepen.io/bemipefe/pen/mdEjaMK

Answer 7

如果您不希望以上任何内容，请尝试Fragment。

在您的情况下，我们可以写

async

如果您使用钩子，则希望将其设置为处于任何条件的状态

await

Answer 8

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

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

Answer 9

您还可以在ReactDOM中包含此HTML，如下所示：

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

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

以下是React文档中的两个链接link和link2，可能会有所帮助。

使用React Variable Statements（JSX）插入HTML

9 个答案: