React Component を wrap する Angular component を作成する part.2

<ng-content> を prop.children で参照できるように

dangerouslySetInnerHTML を使って HTMLElement を string に変換後挿入。

import * as React from 'react';
import * as ReactDOM from 'react-dom';

@Component({
  selector: 'react-wrapper',
  template: '<div #content style="display:none;"><ng-content></ng-content></div> <div #render></div>'
})
export class ReactWrapperComponent implements OnInit, AfterViewInit, OnDestroy {
  @ViewChild("content") content?:ElementRef;
  @ViewChild("render") render?:ElementRef;

  @Input() reactCompoent:React.Component<any> | any;
  @Input() prop:any = {};

  constructor() { }

  ...

  ngAfterViewInit(): void {
    let childrenText =
      Array.from(
        this.content?.nativeElement.children
      )
      .map(
        (d:any) => d.outerHTML
      )
      .join("");

    ReactDOM.render(
      React.createElement(
        this.reactCompoent,
        this.prop,
        React.createElement('div',{
          dangerouslySetInnerHTML:{__html:childrenText}
        })
      ),
      this.render?.nativeElement
    )
  }

  ...
}

sample

<react-wrapper
  [reactCompoent]="reactCompoent"
>
  <p> sample text</p>
</react-wrapper>

import * as React from 'react';

type prop = {}

export const ReactCompoent:React.FC<prop> = prop => {
  return (
    <div>
      <p>
        inner: text
      </p>
      {prop.children}
    </div>
  );
}

終わりに

domが多くなるからこの方法やめた。 react側でやることにする。