Код: Выделить всё
export class Reconciler {
get hostConfig(): ReactReconciler.HostConfig {
return {
getRootHostContext: notSupportedYet,
getChildHostContext: notSupportedYet,
shouldSetTextContent: notSupportedYet,
// ...
}
}
}
Код: Выделить всё
notSupportedYetЗатем у меня есть класс Host:
Код: Выделить всё
export class Host {
private readonly manifest: Manifest;
constructor(manifest: Manifest) {
this.manifest = manifest;
}
public async render(container: HTMLElement) {
const apps = await Promise.all(
this.manifest.apps.map(async (app) => {
const module = await import(app.path);
const App = module.default;
return App();
})
);
const reconciler = new Reconciler();
const reactReconciler = ReactReconciler(reconciler.hostConfig);
const root = reactReconciler.createContainer(container, 0, false, '', null);
reactReconciler.updateContainer(apps, root, null, () => {
console.log('Did render app');
});
}
}
Код: Выделить всё
document.addEventListener('DOMContentLoaded', async function () {
const manifest = {
'apps': [
{
'name': 'App1',
'path': '/dist/App.js', // This includes already-transpiled JSX
},
],
}
const host = new Host(manifest);
const container = document.getElementById('container');
await host.render(container);
});
Мой JSX преобразуется в правильный элемент реакции с $$typeof, props и т. д. props.children также является реагируйте на элемент, поэтому дерево элементов строится правильно. root.current — это FiberNode, хотя root.current.child имеет значение null. Итак, дерево элементов существует, но оно не преобразуется в оптоволоконные узлы.
Я видел в Интернете несколько примеров, и все они указывают на то, что движение идет в правильном направлении. Однако ничего не происходит. notSupportedYet не выдает, ничего не отображается, никаких ошибок — ничего.
Подробнее здесь: https://stackoverflow.com/questions/798 ... reconciler
Мобильная версия