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。如何将stars_data呈现/显示为HTML代码？

谢谢

Answer 1

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

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

注意：

dangerouslySetInnerHTML 是React在浏览器DOM中使用 innerHTML 的替代品。通常，通过代码设置HTML是有风险的，因为很容易在无意间使用户遭受跨站点脚本（XSS）攻击。因此，您可以直接从React设置 HTML ，但必须输入 dangerouslySetInnerHTML 并使用 __ html 键传递对象，以提醒自己这很危险。

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

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渲染变量

1 个答案: