1

我在自定义 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 代码？

谢谢

4

1 回答 1

4

您的代码被解释为纯文本而不是{__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>
);
于 2018-12-11T13:12:23.053 回答