Wordpress Gutenberg React – 使用 HTML 渲染变量

Question

我在自定义 WordPress Gutenberg 块中有此代码

let whole      = Math.floor(stars_client);    
let fraction   = stars_client - whole;
let stars_data = '';

for (var i = 0; i < whole; i ++) {
    stars_data = stars_data + '<i className="fa fa-star" aria-hidden="true"></i>';
}

if (fraction > 0) {
    stars_data = stars_data + '<i class="fa fa-star-half" aria-hidden="true"></i>';
}

return (
    <div className="testimonial-container type_class_3">
        <div className="testimonial-image" style={{ backgroundImage: `url(${imagelinks})` }}></div>
        <div className="testimonial_title">{ testimonial_title }</div>
        <div className="testimmonials_starts">{ stars_data }</div>
        <div className="testimonial-text">{ testimonial_text }</div> 
        <div className="testimonial-author-line"><span className="testimonial-author">{ client_name }</span>, { title_client }</div>
    </div>
);

在 stars_data 变量中，我有一个生成的 HTML 代码，我想显示它。目前该变量未呈现为 HTML。我怎样才能 render/display stars_data 作为 HTML 代码？

谢谢

Answer 1

您的代码被解释为纯文本而不是 {__html: ''} 对象。为了能够像您需要的那样解释 HTML 代码，您必须使用 dangerouslySetInnerHTML，它利用了 __html:

<div className="testimmonials_starts" dangerouslySetInnerHTML={{__html: stars_data}} />

注意：

dangerouslySetInnerHTML is React’s replacement for using innerHTML in the browser DOM. In general, setting HTML from code is risky because it’s easy to inadvertently expose your users to a cross-site scripting (XSS) attack. So, you can set HTML directly from React, but you have to type out dangerouslySetInnerHTML and pass an object with a __html key, to remind yourself that it’s dangerous.

您的最终代码应如下所示：

let whole      = Math.floor(stars_client);    
let fraction   = stars_client - whole;
let stars_data = '';

for (var i = 0; i < whole; i ++) {
    stars_data = stars_data + '<i className="fa fa-star" aria-hidden="true"></i>';
}

if (fraction > 0) {
    stars_data = stars_data + '<i class="fa fa-star-half" aria-hidden="true"></i>';
}

return (
    <div className="testimonial-container type_class_3">
        <div className="testimonial-image" style={{ backgroundImage: `url(${imagelinks})` }}></div>
        <div className="testimonial_title">{ testimonial_title }</div>
        <div className="testimmonials_starts" dangerouslySetInnerHTML={{__html: stars_data}} />
        <div className="testimonial-text">{ testimonial_text }</div> 
        <div className="testimonial-author-line"><span className="testimonial-author">{ client_name }</span>, { title_client }</div>
    </div>
);

Wordpress Gutenberg React – 使用 HTML 渲染变量

Wordpress Gutenberg React – render variable with HTML

reactjs

wordpress-gutenberg

gutenberg-blocks