예를 들어, 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
원하는 동작을 얻기 위해 렌더 내부 dangerouslySetInnerHTML(question)
대신 맵 기능 내부 를 사용할 수 <div>{question}</div>
있지만 사용시주의하십시오. XSS와 같은 원치 않는 보안 위험 (따라서 이름)이 발생할 수 있습니다.
이 기사는 인터넷에서 수집됩니다. 재 인쇄 할 때 출처를 알려주십시오.
침해가 발생한 경우 연락 주시기 바랍니다[email protected] 삭제
몇 마디 만하겠습니다