html 태그가 React Component의 배열에서 오는 경우 문자열 대신 html 태그로 렌더링하는 방법은 무엇입니까?

Syed Noman Ahmed

예를 들어, 3 개 값의 배열이 있습니다. 값에는 일부 html 태그도 있습니다. 해당 배열을 통해 매핑하고 각 배열 항목을 표시하려고하면 값이있는 그대로 표시됩니다. 내 배열 값의 HTML 태그가 진정한 html 요소로 실행되기를 원합니다. 아래는 샘플 반응 앱의 App.js 코드입니다.

const App = () => {
  const [questions, setQuestions] = useState([
    "<h1>Test 1</h1>",
    "<h1>Test 2</h1>",
    "<h1>Test 3</h1>",
  ]);

  return (
    <div>
      {questions.map((question) => (
         <div>{question}</div>
      ))}
    </div>
  );
};

export default App;

위의 반응 구성 요소는 다음과 같이 내 출력을 제공합니다.

<h1>Test 1</h1>
<h1>Test 2</h1>
<h1>Test 3</h1>

그러나 최종 출력은 브라우저에 표시 될 때 html h1 태그가 배열 요소에 적용되는 아래와 같이 표시되기를 원합니다. 바닐라 자바 ​​스크립트에 그런 종류의 html 태그를 작성하면 html 페이지가 자동으로 모든 html 태그를 진정한 html 태그로 읽음으로써 올바르게 렌더링되지만 React Component에서이를 달성하는 방법을 모릅니다.

테스트 1

테스트 2

테스트 3

Kanishk anand

원하는 동작을 얻기 위해 렌더 내부 dangerouslySetInnerHTML(question)대신 맵 기능 내부 를 사용할 수 <div>{question}</div>있지만 사용시주의하십시오. XSS와 같은 원치 않는 보안 위험 (따라서 이름)이 발생할 수 있습니다.

추가 정보 : https://reactjs.org/docs/dom-elements.html

이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.

침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제

에서 수정
0

몇 마디 만하겠습니다

0리뷰
로그인참여 후 검토

관련 기사

Related 관련 기사

뜨겁다태그

보관