Блог

У меня есть файл json со свойствами, и я хочу получить доступ к его свойствам html, которые находятся вместе со встроенными стилями, подобными этому:

одно свойство в файле json было

 "html": "<li class="element-item singlechoice">n<p><a href="#"><div><i class="material-icons">question_answer</i>1)</div> <div>What is meant by 5 A? </div></a></p>n<p> </p><div>A)</div><div><span><input id="q_opt_703193" name="q_opt" onclick="checkSingleQus('703193','1')" type="radio" value=""/></span> A charge of 5 C flows through a point in 1 second       <span class="ansblock"> <i class="material-icons" id="ansright_703193" style="display:none;color:green;font-size: 22px; font-weight: bolder;  margin-bottom: 2px;">done</i>n<i class="material-icons" id="answrong_703193" style="display:none;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;">clear</i> </span>n</div>n<p> </p><div>B)</div><div><span><input id="q_opt_703194" name="q_opt" onclick="checkSingleQus('703194','0')" type="radio" value=""/></span> 5 V electricity flows across \[1\Omega \] of resistance       <span class="ansblock"> <i class="material-icons" id="ansright_703194" style="display:none;color:green;font-size: 22px; font-weight: bolder;  margin-bottom: 2px;">done</i>n<i class="material-icons" id="answrong_703194" style="display:none;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;">clear</i> </span>n</div>n<p> </p><div>C)</div><div><span><input id="q_opt_703195" name="q_opt" onclick="checkSingleQus('703195','0')" type="radio" value=""/></span> 5V electricity is causing 1 C of charge to flow       <span class="ansblock"> <i class="material-icons" id="ansright_703195" style="display:none;color:green;font-size: 22px; font-weight: bolder;  margin-bottom: 2px;">done</i>n<i class="material-icons" id="answrong_703195" style="display:none;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;">clear</i> </span>n</div>n<p> </p><div>D)</div><div><span><input id="q_opt_703196" name="q_opt" onclick="checkSingleQus('703196','0')" type="radio" value=""/></span> A charge of 5 C flows through a point in 5 seconds.       <span class="ansblock"> <i class="material-icons" id="ansright_703196" style="display:none;color:green;font-size: 22px; font-weight: bolder;  margin-bottom: 2px;">done</i>n<i class="material-icons" id="answrong_703196" style="display:none;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;">clear</i> </span>n</div>n<!--Added _q to show question id on next page-->n<span class="pull-right view_ans"><a href="https://www.testsite.com/question-bank/electricity_q1/2140/202582" target="_blank">View Solution <i class="material-icons">play_arrow</i> </a></span>n</li>",
 

я пытаюсь получить доступ к этому свойству с помощью

data.map((item) => (<div dangerouslySetInnerHTML={{__html:item.html}}></div>))

Он отлично передает содержимое html, но не применяет стили, что мне делать?

Встроенный css уже работает, только свойство установлено как none, подобное этому display:none . Рабочее свойство html приведено ниже,

"html": "<li class="element-item singlechoice">n<p><a href="#"><div><i class="material-icons">question_answer</i>1)</div> <div>What is meant by 5 A? </div></a></p>n<p> </p><div>A)</div><div><span><input id="q_opt_703193" name="q_opt" onclick="checkSingleQus('703193','1')" type="radio" value=""/></span> A charge of 5 C flows through a point in 1 second <span class="ansblock"> <i class="material-icons" id="ansright_703193" style="display:block;color:green;font-size: 22px; font-weight: bolder; margin-bottom: 2px;">done</i>n<i class="material-icons" id="answrong_703193" style="display:block;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;">clear</i> </span>n</div>n<p> </p><div>B)</div><div><span><input id="q_opt_703194" name="q_opt" onclick="checkSingleQus('703194','0')" type="radio" value=""/></span> 5 V electricity flows across \[1\Omega \] of resistance <span class="ansblock"> <i class="material-icons" id="ansright_703194" style="display:block;color:green;font-size: 22px; font-weight: bolder; margin-bottom: 2px;">done</i>n<i class="material-icons" id="answrong_703194" style="display:block;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;">clear</i> </span>n</div>n<p> </p><div>C)</div><div><span><input id="q_opt_703195" name="q_opt" onclick="checkSingleQus('703195','0')" type="radio" value=""/></span> 5V electricity is causing 1 C of charge to flow <span class="ansblock"> <i class="material-icons" id="ansright_703195" style="display:block;color:green;font-size: 22px; font-weight: bolder; margin-bottom: 2px;">done</i>n<i class="material-icons" id="answrong_703195" style="display:block;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;">clear</i> </span>n</div>n<p> </p><div>D)</div><div><span><input id="q_opt_703196" name="q_opt" onclick="checkSingleQus('703196','0')" type="radio" value=""/></span> A charge of 5 C flows through a point in 5 seconds. <span class="ansblock"> <i class="material-icons" id="ansright_703196" style="display:block;color:green;font-size: 22px; font-weight: bolder; margin-bottom: 2px;">done</i>n<i class="material-icons" id="answrong_703196" style="display:block;color:red; font-size: 22px; font-weight: bolder; margin-bottom: 2px;">clear</i> </span>n</div>n<!--Added _q to show question id on next page-->n<span class="pull-right view_ans"><a href="https://www.testsite.com/question-bank/electricity_q1/2140/202582" target="_blank">View Solution <i class="material-icons">play_arrow</i> </a></span>n</li>"