위젯에서 DOM 요소를 virtual-dom으로 변환하기

개발
1

현재 커스텀 katex 렌더링 결과로 생성된 DOM 요소를 가지고 있습니다.

아래와 같이 생성됩니다:

var dom_element = document.createElement("p")
dom_element.innerHTML = "some text that contain latex"
renderMathInElement(dom_element)

이 시점에서 dom_element에는 렌더링하려는 HTML이 포함되어 있습니다. 그리고 다음과 같이 반환합니다:

html() {
 return h(some other component ...... , h("div", dom_element))
}

h는 VNode를 기대하기 때문에 이로 인해 오류가 발생합니다. 대신 내부 HTML을 전달해 보았습니다:

html() {
 return h(some other component ...... , h("div", dom_element.innerHTML))
}

이 경우 dom_element.innerHTML 안의 태그가 HTML이 아닌 순수 텍스트로 렌더링됩니다.

이 문제를 해결할 방법이 있을까요?

2

위젯은 이 용도에 거의 확실히 적합한 도구가 아닙니다.

위젯은 args를 통해 명시적으로 전달되는 정보 외에 다른 어떤 정보에도 접근해서는 안 되며, 그 후에는 자신 내부에서 일어나는 일에 집중하고, 최대 한도 내에서 액션을 위로 전달하는 것만 신경 써야 합니다. DOM의 다른 부분에 개입해서는 안 됩니다.

개인적 의견으로는 컴포넌트를 사용하는 것이 더 나을 것입니다.

LaTeX(수식 포함)를 처리하여 HTML로 반환하는 JavaScript 함수를 찾아, 그 결과를 컴포넌트에서 렌더링하는 것이 불가능한 이유가 있을까요? 프레임워크 외부의 DOM 조작을 완전히 피할 수 있다면 그것이 최선의 선택일 것입니다.

3

제 사용 사례는 다음과 같습니다:

현재 태그 배너(tag banners) 컴포넌트를 사용 중이며, 해당 소스를 수정하고 있습니다. 기본적으로 제 웹사이트에서 일부 태그 설명에 LaTeX가 포함되어 있습니다. 이 LaTeX를 배너에 올바르게 렌더링하고 싶습니다.

위젯을 수정하는 대신 테마 커스터마이즈(Customize Theme)의 “Head” 섹션에 스크립트를 추가하고 싶었습니다. 하지만 위젯이 이미 로드되었는지 확인하는 방법을 찾지 못했습니다. “Head” 섹션에서 document.getElementById를 호출하면 관련 HTML 컴포넌트(태그 설명을 표시하는 요소)가 아직 로드되지 않아 빈 요소만 반환됩니다.

4

위젯이나 컴포넌트가 로드되는 시점을 보장할 수는 없습니다. 하지만 didInsertElement와 같은 컴포넌트 이벤트에서 작업을 수행할 수 있습니다.