reactjs - マウントポイントから反応要素に子ノードを渡す

Question

UI コンポーネントを共有する必要がある 2 つの大きな既存の Web サイトがあります。計画では、これらのコンポーネントは遅延ロードされ、小道具のデータ属性を含む div タグを記述することで、必要に応じてページのどこにでもマウントできます。

<div data-component="InfoNotification" data-title="Example InfoNotification">
    <p>With child elements</p>
</div> 

したがって、上記のこの HTML は、InfoNotification コンポーネントをページにマウントし、それprops.titleを「通知の例」props.childrenと<p>With child elements</p>

props.childrenこれは、何らかの理由で子ノードが通過しないことを除いて機能します。

遅延読み込みロジック:

import AL from './AsyncLoadable'
asyncComponents.InfoNotification = AL({loader: () => import('./lib/notifications/InfoNotification.jsx')})

コンポーネント取り付けコード:

import { asyncComponents } from './registeredAsyncComponents'

// Find any react mounting points on the page and load the correct component for them
const mountPoints = document.querySelectorAll('div[data-component],span[data-component]')
for (let i = 0; i < mountPoints.length; i++) {
    if (asyncComponents[mountPoints[i].dataset.component]) {
        let children = mountPoints[i].childNodes; // <-- if this was a react element it would work
        let loadableComponent = React.createElement(asyncComponents[mountPoints[i].dataset.component], mountPoints[i].dataset, children)
        ReactDOM.render(
            <I18nextProvider i18n={i18n}>
                {loadableComponent}
            </I18nextProvider>,
            mountPoints[i]
        )
    } else {
        console.error(`Unable to find a registered component named ${mountPoints[i].dataset.component}. Please register async components in src/registeredAsyncComponents.js`)
    }
}

InfoNotification コンポーネントは、DOM ノードを react children プロパティに渡そうとするときだけではなく、react を介して正しく機能します。

注: 法人顧客がおり、IE11 互換のソリューションが必要です。