Как отображать данные с тегом div внутри массива в реакции js?

avatar
Sidath
9 августа 2021 в 04:54
79
1
0

Я создаю приложение для реагирования и получаю все данные из вызовов API. Я установил данные в массив и должен их отобразить. Мой набор данных выглядит следующим образом: 

[{idappcontent: "Sign_01", content: "<div style=\"color: #0D0D0D;\"> When you give us your name,<br /> e-mail address and the dates of your birthday </div>"}
{idappcontent: "Sign_02", content: "<div style=\"text-align:center\"> <label for=\"firstName\">First Name</label></div><div style=\"margin-top: 3%;\"><input id=\"fname\" name=\"firstName\" onkeyup=\"FirstnameValidation()"/></div>"}
{idappcontent: "Sign_03", content: "<div style=\"text-align:center\"> <label for=\"lname\">Last Name</label> </div><div style=\"margin-top: 3%;\"><input id=\"lname\" name=\"lname\" style=\"font-family: trajanPro;width:10 /></div>"}
{idappcontent: "Sign_04", content: "<div style=\"text-align:center\"><label for=\"email\">Email Address</label></div><div style=\"margin-top: 1%;\"><input id=\"email\" type=\"email\" name=\"email\" onkeyup=\"emailvalidat()"/></div>"} ]

Как я могу отобразить данные «контента» в React js?

Как отобразить их внутри тега div, как показано ниже

<div class="Header-banner" style="text-align: center;" id="Sign_01"></div>
    <div id="Sign_02"></div>
    <div id="signUpfrm" style="width:100%">
        <div style="text-align:center">
            <div style="display:inline-table;width:100%">
                <div id="Sign_03" style="display: inline-block; text-align: right; width: 32%;margin-right: 1px;"></div>
                <div id="Sign_04" style="display: inline-block; text-align: left; width: 32%; margin-left: 2px;"></div>
            </div>
            <div id="Sign_05" style="margin-top: 2%; width: 65%; display: inline-table;"></div>

            <div id="Sign_09" class="MainWrapper" style="margin-top: 2%; width: 65%; display: inline-table;"></div>
            <div style="display:inline-flex; width: 89%;">
                <div id="Sign_07" class="MainWrapper" style="width:50%"></div>
                <div id="Sign_08" class="Mainwrapper" style="width: 50%; margin-top: 8px;"></div>
            </div>
            <div style="height: 28px; margin-top: 4%">
                <div id="Sign_06" class="MainWrapper" style="margin-top: 4%;"></div>
            </div>

        </div>
    </div>
Источник
Drew Reese
9 августа 2021 в 05:15
1

Несмотря на то, что здесь уже есть ответ, я все равно спрошу, что вы уже пробовали самостоятельно, чтобы отобразить любой из массивов, которыми вы поделились, и описать, в чем проблема, если она есть. coderhelper.com/help/минимально-воспроизводимый-пример

Ответы (1)

avatar
Sinan Yaman
9 августа 2021 в 05:11
2

Вы должны использовать функцию map и dangerouslySetInnerHTML для части содержимого:

import DOMPurify from 'dompurify';

return (
  arr.map((item, index) => (
  <div key={item.idappcontent}>
    <div>
      {item.idappcontent}
    </div>
    <div dangerouslySetInnerHTML={{ __html: DOMPurify.sanitize(item.content) }}/>
  </div>
  ))
)
Anil Kumar
9 августа 2021 в 05:22
2

Вы можете использовать DOMPurify.sanitize(content) перед его настройкой в ​​опасном SetInnerHTML, чтобы избежать атаки XSS. Это сделает это решение идеальным решением.

Sidath
9 августа 2021 в 05:27
0

не могли бы вы добавить пример кода? Я новичок, чтобы реагировать.

Rakib
9 августа 2021 в 05:40
2

Я реализовал решение, проверьте здесь: stackblitz.com/edit/react-ec9c8v?file=src/App.js

Drew Reese
9 августа 2021 в 05:56
0

@AnilKumar Хорошая привычка, но если OP подвергается инъекционным атакам из своих собственных API, то я предполагаю, что более вопиющий компромисс уже произошел. Это в значительной степени игра окончена. 😆

Anil Kumar
9 августа 2021 в 06:01
1

@DrewReese Я согласен с вашей точкой зрения, но в каждом корпоративном приложении эти проблемы выделяются при тестировании пера / Fortify, независимо от того, является ли он собственным API. Мы не можем предсказать, какой слой будет скомпрометирован. Ответ можно перехватить с помощью таких инструментов, как fiddler и т. д., а ответ можно изменить с помощью тегов скрипта, чтобы перенаправить пользователя на стороннюю страницу.

Drew Reese
9 августа 2021 в 06:03
0

@AnilKumar Полностью. Защитное программирование. Не доверять никому. Даже не себя.

Sidath
9 августа 2021 в 06:49
0

Нужно ли устанавливать пакет DOMPurify?

Sidath
9 августа 2021 в 07:17
0

Я редактирую свой код выше. Пожалуйста, проверьте этот код жирным шрифтом. Мне нужно отображать их внутри тега div один за другим.