"dangerouslySetInnerHTML"을 형제로 렌더링하여 구성 요소를 교환하십시오.

Question

렌더링 할 수 있도록 필요한 매우 큰 테이블이 있습니다. 나는 1000x1000을 상한 확장 성 테스트로 선택했습니다. 대개의 경우 사용자는 이처럼 큰 표를 렌더링하지 않지만 때로는 "페이징"모델을 원하지 않고 내 요구 사항을 충족시키는 무한 표를 찾지 못했습니다.

<td> 불면 최대 반작용으로 각 셀을 렌더링 (놀라운 일하지를! - 그 구성 요소의 많은입니다)

나는 반작용 구성 요소로 모든 <td>을 관리 할 수 ​​정말 필요하지 않는, 그래서 사용하고 있습니다 <tr> 구성 요소의 dangerouslySetInnerHTML. 그 정도면 충분합니다.

이 지금이 내가 <tr>에서 하나의 가장 왼쪽 <td>는 반작용 구성 요소가 될 가지고 싶습니다 <tr dangerouslySetInnerHTML={html_cols} />

로 정의하고 나머지는 수 dangerouslySetInnerHTML

내가 <tr><td>row header</td><div dangerouslySetInnerHTML={html_cols} /></tr>을 사용할 수 있습니다, 그러나 <td>을 <div>에 넣는 것은 잘못되었습니다.

이상적으로 내부 HTML을 허용하는 가상/null 구성 요소가 필요하지만 둘러싸인 마크 업이 없습니다.

편집 :

내가 수동으로 입력을 소독해야 할 것 실감 나는 너무 다른 제안을 열려있어. 내가 React를 여전히 사용할 수 있는지 알기 위해 현재 renderToStaticMarkup을보고 있지만, 일부 노드에는 가상 DOM 오버 헤드가 없습니다.

Answer 1

React가 어떻게 작동하는지에 대해 자세히 알고 나면, React Node는 텍스트와 관련된 DOM 노드가없는 React Node입니다.

하지만 React Node는 가상 DOM 노드입니다. 관련 DOM 노드가없는 React Node가있을 수는 없으므로 원하는 것은 불가능합니다.