Javascript 在React组件中运行带有小部件的JS DockerPanel

我有一个react应用程序，在其中一个组件中，我想呈现一个荧光桌面（）

网络资源建议另一种方法，在一个磷光体小部件中运行React组件，但我需要在磷光体桌面上用React组件中的小部件来包装它。我不知道该怎么办

这是我第一次尝试：

import React, { Component } from 'react';
import './App.css';

import { DockPanel } from 'phosphor-dockpanel';
import { Message } from 'phosphor-messaging';
import { TabPanel } from 'phosphor-tabs';
import { ResizeMessage, Widget } from 'phosphor-widget';


class MyWidget extends Widget {

  static createNode() {
    console.log('widget:createNode');
    var node = document.createElement('div');
    var app = document.createElement('div');
    app.className = 'todoapp';
    node.appendChild(app);
    return node;
  }

  constructor(model) {
    super();
    this.addClass('TodoWidget');
    this._model = model;
    console.log('widget:constructor');
  }

  get model() {
    console.log('widget:getModel');    
    return this._model;
  }

  onAfterAttach(msg) {
    console.log('onAfterAttach');
    //this._model.subscribe(() => this.update());
    this.update();
  }

  onUpdateRequest(msg) {
    console.log('widget:onUpdateRequest');    
    var data = { model: this._model };
    var host = this.node.firstChild;
    //React.render(React.createElement(app.TodoApp, data), host);
  }
}


class ReactDockPanel extends Component {
  constructor(props) {
    super(props);
  }

  componentWillMount() {
    this.panel = new DockPanel();
    this.panel.id = this.props.id;

    this.widget = new MyWidget();
    this.panel.insertLeft(this.widget);
  }

  componentDidMount() {
    this.panel.attach(this.node);
  }

  render() {
    return (
      <div ref={el=>this.node=el}>
      </div>  
    );
  }    
}

class App extends Component {

  render() {
    return (
      <ReactDockPanel id='main'>
      </ReactDockPanel>
    );
  }
}

export default App;

import React，{Component}来自'React'；
导入“/App.css”；
从'phosphore DockPanel'导入{DockPanel}；
从“消息传递”导入{Message}；
从“荧光粉标签”导入{TabPanel}；
从“Fosphore Widget”导入{ResizeMessage，Widget}；
类MyWidget扩展了Widget{
静态createNode（）{
log（'widget:createNode'）；
var节点=document.createElement（'div'）；
var app=document.createElement（'div'）；
app.className='todoapp'；
appendChild（app）；
返回节点；
}
建造师（模型）{
超级（）；
this.addClass（'TodoWidget'）；
这个._model=model；
log（'widget:constructor'）；
}
获取模型（）{
log（'widget:getModel'）；
返回此。\u模型；
}
onAfterAttach（msg）{
console.log（'onAfterAttach'）；
//this.u model.subscribe（（）=>this.update（））；
这个.update（）；
}
onUpdateRequest（msg）{
log（'widget:onUpdateRequest'）；
var data={model:this.\u model}；
var host=this.node.firstChild；
//React.render（React.createElement（app.TodoApp，data），主机）；
}
}
类ReactDockPanel扩展组件{
建造师（道具）{
超级（道具）；
}
组件willmount（）{
this.panel=new DockPanel（）；
this.panel.id=this.props.id；
this.widget=newmywidget（）；
this.panel.insertLeft（this.widget）；
}
componentDidMount（）{
此.panel.attach（此.node）；
}
render（）{
返回(
this.node=el}>
);
}    
}
类应用程序扩展组件{
render（）{
返回(
);
}
}
导出默认应用程序；

我不知道如何替换React.render（React.createElement（app.TodoApp，data），host）；磷光体文档仅供参考，但不用于学习，因此我将使用它们唯一的示例代码

理想情况下，我希望能够这样渲染：

<ReactDockPanel id='mydesktop'>
  <SomeWidget insert='left' />
  <SomeOtherWidget insert='right' />
</ReactDockPanel>

import {DockPanel, Widget} from "@phosphor/widgets";
import {createPortal} from "react-dom";

interface IWidgetInfo {
  component: JSX.Element;
  node: HTMLElement;
}

interface IDockState {
  widgetInfos: IWidgetInfo[];
}

interface IDockProps {
  children: JSX.Element[];
}

class WrapperWidget extends Widget {
  constructor(name: string, node: HTMLElement) {
    super({node});
    this.setFlag(Widget.Flag.DisallowLayout);
    this.title.label = name;
  }
}

export class Dock extends React.PureComponent<IDockProps, IDockState> {
  elem: HTMLElement;
  dock: DockPanel;

  componentDidMount() {
    this.dock = new DockPanel(this.context.store);

    let widgetInfos = [];
    for (let component of this.props.children) {
      let node = document.createElement("div");
      let widget = new WrapperWidget("Widget Name", node);
      this.dock.addWidget(widget);
      widgetInfos.push({node, component});
    }
    this.setState({...this.state, widgetInfos});

    Widget.attach(this.dock, this.elem);
  }

  render() {
    return (
      <div ref={(c) => this.elem = c}>
          {this.state.widgetsInfos.map(widgetInfo => {
             return createPortal(widgetInfo.component, widgetInfo.node);
          })}
      </div>
    );
  }
}

---

不确定是否可以做到。

我可以用React门户做类似的工作。在我的例子中，我试图呈现React组件子级而不是小部件子级，但希望它仍然有用。我使用的步骤是

1） 在外部React组件的初始渲染中，使用

ref

获取元素的引用

2） 在

componentDidMount

中，创建一个新的DockPanel并将其附加到元素。然后，循环浏览您想要的小部件，a）将每个小部件添加到DockPanel，b）建立一个节点列表，在其中渲染React组件，并使用该列表执行此操作

3） 在下一个

render

调用中，循环查看

this.state

中的节点列表并创建门户

代码如下所示：

<ReactDockPanel id='mydesktop'>
  <SomeWidget insert='left' />
  <SomeOtherWidget insert='right' />
</ReactDockPanel>

import {DockPanel, Widget} from "@phosphor/widgets";
import {createPortal} from "react-dom";

interface IWidgetInfo {
  component: JSX.Element;
  node: HTMLElement;
}

interface IDockState {
  widgetInfos: IWidgetInfo[];
}

interface IDockProps {
  children: JSX.Element[];
}

class WrapperWidget extends Widget {
  constructor(name: string, node: HTMLElement) {
    super({node});
    this.setFlag(Widget.Flag.DisallowLayout);
    this.title.label = name;
  }
}

export class Dock extends React.PureComponent<IDockProps, IDockState> {
  elem: HTMLElement;
  dock: DockPanel;

  componentDidMount() {
    this.dock = new DockPanel(this.context.store);

    let widgetInfos = [];
    for (let component of this.props.children) {
      let node = document.createElement("div");
      let widget = new WrapperWidget("Widget Name", node);
      this.dock.addWidget(widget);
      widgetInfos.push({node, component});
    }
    this.setState({...this.state, widgetInfos});

    Widget.attach(this.dock, this.elem);
  }

  render() {
    return (
      <div ref={(c) => this.elem = c}>
          {this.state.widgetsInfos.map(widgetInfo => {
             return createPortal(widgetInfo.component, widgetInfo.node);
          })}
      </div>
    );
  }
}

从“@phosphore/widgets”导入{DockPanel，Widget}；
从“react dom”导入{createPortal}；
接口IWidgetInfo{
组件：JSX.Element；
节点：HtmleElement；
}
接口IDockState{
widgetInfos:IWidgetInfo[]；
}
接口IDockProps{
子元素：JSX.Element[]；
}
类包装小部件扩展小部件{
构造函数（名称：字符串，节点：HtmleElement）{
超级（{node}）；
this.setFlag（Widget.Flag.DisallowLayout）；
this.title.label=名称；
}
}
导出类Dock扩展React.PureComponent{
元素：HTMLElement；
码头：码头板；
componentDidMount（）{
this.dock=新的DockPanel（this.context.store）；
设widgetInfos=[]；
for（让此.props.children的组件）{
让节点=document.createElement（“div”）；
let widget=new WrapperWidget（“widget Name”，node）；
this.dock.addWidget（widget）；
push（{node，component}）；
}
this.setState（{…this.state，widgetInfos}）；
Widget.attach（this.dock，this.elem）；
}
render（）{
返回(
this.elem=c}>
{this.state.widgetsInfos.map（widgetinfos=>{
返回createPortal（widgetInfo.component、widgetInfo.node）；
})}
);
}
}

使用磷光体的版本很少有变化，这是否仍然适用于最新的磷光体？