Html-react-parser: 스타일 속성에서 !important를 처리하는 방법은 무엇입니까?

@linkurzweg html-react-parser 필요하지 않을 수 있습니다. 바이올린을 참조하십시오. 위험하게 SetInnerHTML을 사용하는 경우 XSS 취약점에 주의하십시오.

@remarkablemark 아, 위험하게
제 경우에는 XSS에 대한 실제 위험이 없으므로 괜찮습니다.

문제는 본문에 일부 React 구성 요소로 대체해야 하는 요소가 포함될 수 있기 때문에 여전히 html-react-parser를 통해 모든 것을 실행해야 한다는 것입니다. 요소에 스타일 속성이 있는 경우에만 그대로 렌더링할 수 있습니다.
구문 분석할 때 domNode를 문자열로 다시 변환할 수 있는 방법이 있습니까?

매우 감사합니다!

@linkurzweg domToReact() domNode를 전달할 수 있으며 React 요소로 렌더링됩니다. 교체 예를 참조

@remarkablemark 다시 한번 감사드립니다! 나는 그것을 알고 있지만 그것이 내 경우에 어떻게 도움이 될지 모르겠습니까?
여전히 domNode를risklySetInnerHTML과 함께 사용할 수 있는 문자열로 되돌려야 합니다. 아니면 뭔가를 얻지 못하고 있습니까?

@linkurzweg 나는 당신의 사용 사례를 따르지 않습니다. CodeSandbox , JSFiddle 또는 Repl.it을 사용하여 예제를 제공할 수 있습니까?

@remarkablemark 여기에서 바이올린을 참조하세요: https://jsfiddle.net/9bezs1rt/.
그래서, 그것은 다음과 같습니다. 모든 html이 포함된 하나의 거대한 문자열을 얻었습니다. 이 문자열은 어떤 방식으로든 구문 분석해야 합니다(스크립트 태그, iframe, 소셜 미디어 포함 등을 포함할 수 있음). 모든 dom 노드를 반복하고 다양한 경우를 처리해야 합니다.

dom 노드에 일부 인라인 스타일이 연결되어 있는 경우 일부 React 구성 요소로 교체할 필요가 없다고 가정할 수 있으며 !important가 있는 스타일을 포함하여 전달하기만 하면 됩니다. 그리고 불행히도 그들은 길을 잃습니다.

@linkurzweg 바이올린을 만들어 주셔서 감사합니다. 따라서 스타일이 올바르게 렌더링되지 않는 이유는 인라인 스타일에 !important 가 필요하지 않기 때문입니다.

!important 제거한 후 빨간색 테두리를 표시했습니다. 업데이트된 바이올린을 참조하십시오.

@remarkablemark 물론, 바보야! 인라인 스타일과 충돌할 수 있는 html 문자열 내부에 !important가 있는 다른 스타일 태그가 있을 수 있습니다(모두 매우 지저분합니다). 하지만 !important도 제거할 수 있으므로 괜찮습니다. :D 이것과 도움을 주셔서 대단히 감사합니다!