React#

许多JupyterLab API需要Lumino Widgets 它们比原生DOM元素具有一些额外的功能，包括：

传播到小部件层次结构的调整大小事件。
生命周期事件 (onBeforeDetach, onAfterAttach, 等).
基于CSS和绝对定位的布局。

我们支持使用来自@jupyterlab/ui-components的ReactWidget类将React组件包装成Lumino小部件：

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

import * as React from 'react';

import { Widget } from '@lumino/widgets';
import { ReactWidget } from '@jupyterlab/ui-components';

function MyComponent() {
  return <div>My Widget</div>;
}

const myWidget: Widget = ReactWidget.create(<MyComponent />);
Widget.attach(myWidget, document.body);

这里我们使用create静态方法将React元素转换为Lumino小部件。每当小部件被挂载时，React元素将在页面上渲染。

如果您需要在Lumino小部件上处理其他生命周期事件或向其添加其他方法，您可以子类化ReactWidget并重写render方法以返回一个React元素：

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

import * as React from 'react';

import { Widget } from '@lumino/widgets';
import { ReactWidget } from '@jupyterlab/ui-components';

function MyComponent() {
  return <div>My Widget</div>;
}
class MyWidget extends ReactWidget {
  render() {
    return <MyComponent />;
  }
}
const myWidget: Widget = new MyWidget();
Widget.attach(myWidget, document.body);

我们使用Lumino Signals来表示JupyterLab中随时间变化的数据。要使您的React元素响应信号事件而改变，请使用来自@jupyterlab/ui-components的UseSignal组件，它实现了“render props”：

/*
 * Copyright (c) Jupyter Development Team.
 * Distributed under the terms of the Modified BSD License.
 */

import * as React from 'react';

import { ReactWidget, UseSignal } from '@jupyterlab/ui-components';

import { ISignal, Signal } from '@lumino/signaling';

import { Widget } from '@lumino/widgets';

function MyComponent() {
  return <div>My Widget</div>;
}

function UseSignalComponent(props: { signal: ISignal<MyWidget, void> }) {
  return <UseSignal signal={props.signal}>{() => <MyComponent />}</UseSignal>;
}

class MyWidget extends ReactWidget {
  render() {
    return <UseSignalComponent signal={this._signal} />;
  }

  private _signal = new Signal<this, void>(this);
}

const myWidget: Widget = new MyWidget();
Widget.attach(myWidget, document.body);

运行组件和搜索覆盖层中的createSearchOverlay函数都使用了这些功能，并作为最佳实践的良好参考。

在JupyterLab的扩展示例库中，还有一个简单示例，展示了如何创建一个Lumino react小部件。

我们目前没有将Lumino小部件嵌入到React组件中的方法。如果你发现自己正在尝试这样做，我们建议将Lumino小部件转换为React组件，或者使用Lumino小部件作为外层组件。

我们遵循React文档和 “React & Redux in TypeScript - 静态类型指南” 以获取在TypeScript中使用React的最佳实践。

React#

本页面