我在我的 react 组件中使用危险的 SetInnerHTML 以如下格式注入 html：
<div
className="mt-2 col variant-attr-cell p-0"
dangerouslySetInnerHTML = { {
__html: JSON.parse(attrs[i].snippet).snippet.replace("{text}",
attrs[i].choices[j].visualization_data)
} }
>
</div>
它工作正常，但我试图同时将样式传递给注入的 html 但不知道如何！我正在尝试根据我获得的 api 向注入的 html 添加不同的样式，如下所示：
height: 12px;
width: 12px;
border-radius: 50%;
display: inline-block;
margin: 0 4px;
仅供参考，注入的 html 主要是这样的：
<span></span>
并且样式必须添加到这个而不是容器div！任何解决方案表示赞赏，谢谢。
我正在尝试制作一个模态窗口以对模糊的背景做出反应。我想要实现的是模糊背景内容而不是模糊背景图像，因为没有图像只是模态窗口后面的内容。到目前为止，我遇到了这些解决方案磨砂玻璃、磨砂玻璃和玻璃效果，但它们都使用背景图像来应用模糊效果，但这不是我想要的。
反应组件：
import React from "react";
import './index.scss';
const Modal = ({ handleClose, show, children }) => {
return (
<div class="modal display-block">
<div class="modal-container">
<section class="modal-main">
<div class="row no-gutters header">
<div class="col">
<i class="fa fa-lg fa-close"></i>
</div>
</div>
<div class="row no-gutters content"></div>
</section>
</div>
</div>
);
};
export default Modal;
css：
@import 'yelStrap/_variables.scss';
.modal {
position: fixed;
top: 0;
left: 0;
width:100%;
height: 100%;
}
.modal-container {
background: inherit; …$(document).ready(function() {
$.ajax({
type : 'GET',
url : '/delivery_places.json',
dataType : 'json',
success : function(data){
console.log(data);
for (var i = 0; i < data.restaurants.length; i++) {
$('.slick_restaurant').append('<div><div class="ibox-content col-xs-12 col-sm-6 col-sm-offset-3"><h2>'+data.restaurants[i].name+'</h2><hr><div><div class="col-xs-12 poster"><img src="/image/reservation/HQ.jpg" class="img-responsive" title="'+data.restaurants[i].name+'" alt="'+data.restaurants[i].name+'"></div><div class="col-xs-12" style="margin-top:20px;"><div class="col-xs-12 col-sm-10 col-sm-offset-1"><i class="fa fa-map-marker fa-lg fa-lg"></i><address>'+data.restaurants[i].location+'</address></div></div><div class="col-xs-12" id="mealBtns'+i+'"></div></div></div></div>');
for (var j = 0; j < data.restaurants[i].vendors.length; j++) {
$('#mealBtns'+i).append('<h3><span class="label label-default">'+data.restaurants[i].vendors[j].name+'</span></h3><div class="btn-group btn-group-justified" id="btnNum'+i+j+'"></div>');
for (var z = 0; z < data.restaurants[i].vendors[j].meals.length; z++) {
$('#btnNum'+i+j).append('<a href="/delivery_places/'+data.restaurants[i].vendors[j].meals[z].delivery_place_id+'/reservations" class="btn btn-primary" id="dpid'+data.restaurants[i].vendors[j].meals[z].delivery_place_id+'">'+data.restaurants[i].vendors[j].meals[z].name+'</a>');
} …我需要一个简单的分页，只显示没有控制按钮的页码（第一个，上一个，下一个和最后一个），我查看了twbs-pagination github docs 和 stackoverflow 中的twbs 选项， 但不幸的是什么也没找到！是否可以在此插件中删除控制按钮？如果不能，您能否介绍一个可与动态数据一起使用的分页插件（通过 ajax 调用）？提前感谢您的帮助。