Question

边缘情况我知道，但如果我主要用于教育目的，我想解决它。我可能会重新设计这个。

情景：

电子应用程序，其中在主进程中定义了一堆React组件。
Webview（禁用节点集成）环绕BrowserWindow中的现有HTTPS页面
在webview preload 脚本中，我需要（'react'）和require（'react-dom'）并通过remote.getGlobal（'classObject'检索React.Component扩展类（不是实例） “）
在window.onload中，我在一些黑客攻击后渲染组件以克服Babel / Webpack问题并在Main和Renderer进程之间代理一个对象，并渲染成div（这不是一个永久的方法）
DOM事件处理程序未连线

问题是React DOM事件处理程序没有连接的原因。

花了一些时间来追踪React代码，但这对我来说太快了，无法快速了解。

任何人都了解React事件接线有快速解答吗？

渲染标记与本机BrowserWindow中的React设置相同。

preload.js

'use strict';

window.onload = function () {
var _require = require('electron');

var webFrame = _require.webFrame;
var remote = _require.remote;
window.jq = require('jquery');
window.React = require('react');
window.ReactDOM = require('react-dom');

var appOptions = remote.getGlobal('app_options');
var mainUI = remote.getGlobal('app_ui');
window.Button = mainUI.componentFactory.getClass('Button');
let f = function(...args) {
    console.trace('Create window.Button',args)

    let b = new window.Button(...args)
    let originalRender = b.render
    b.render = function()
    {
        let c = originalRender()
        let d = {}
        Array.from(Object.keys(c)).forEach((p) => {
            if (p !== '$$typeof')
                d[p] = c[p]
            else
                d['$$typeof'] = Symbol['for']('react.element')
        })
        return d
    }
    return b

}
Array.from(Object.keys(window.Button)).forEach((p) => {
    f[p] = window.Button[p]
})
window.jq(document).ready(function () {


    var head  = document.getElementsByTagName('head')[0];
    var link  = document.createElement('link');
    link.rel  = 'stylesheet';
    link.type = 'text/css';
    link.href = 'https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.2.2/semantic.min.css';
    link.media = 'all';
    head.appendChild(link);

    let a = (window.React.createElement(
        f,
        { emphasis: 'primary',onClick: function onClick() {
            console.log('hi');
        }    },
        'Hi!'))

    window.ReactDOM.render(a
    , document.getElementById('browserErrorPanel'));

    setInterval(function () {
        var a = jq('a[id=Dashboard]');
        if (a.length) a.text('Tim');
    }, 50);
});

};

```

电子预载脚本，React组件注入

0 个答案: