Wordpress Gutenberg React - визуализация переменной с помощью HTML - PullRequest
Новая
       54

Wordpress Gutenberg React - визуализация переменной с помощью HTML

0 голосов
/ 11 декабря 2018

У меня есть этот код в пользовательском блоке 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-кода?

Спасибо

1 Ответ

0 голосов
/ 11 декабря 2018

Ваш код интерпретируется как обычный текст, а не как объект {__html: ''}.Чтобы иметь возможность интерпретировать HTML-код так, как вам нужно, вы должны использовать dangerouslySetInnerHTML , которое использует __html: 

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

ПРИМЕЧАНИЕ:

dangerouslySetInnerHTML является заменой React для использования innerHTML в DOM браузера.В общем, настройка HTML из кода рискованна, потому что легко непреднамеренно подвергнуть ваших пользователей атаке межсайтового скриптинга (XSS).Таким образом, вы можете установить HTML непосредственно из React, но вы должны набрать 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>
);
...