Question

我很好奇在React环境中使用常规javascript库（不是作为React组件编写）的最佳方式。

例如，我们假设有一个javascript库，它将一个简单的小部件嵌入到我的网页中。说明如下：

在标题中包含加载标记。
将代码段嵌入您想要的任何位置。

在普通网页中，我会执行以下操作：

<head>
    <script src="http://karaoke.com/source.js"></script>
</head>

<body>
    <h1>Hello look at my cool widget library</h1>
    <karaoke width="600" height="400" />
</body>

如果我有这样的React组件，我如何达到同样的效果？

class MainView extends Component {
  render() {
    return (
      <div>
        <h1>I want to show my karaoke widget here, but how?</h1>
      </div>
    );
  }
}

Answer 1

JSX的主要目的是感觉像HTML。 React组件中render的主要目的是呈现“假”（虚拟）HTML。如果您的外部窗口小部件也是React组件，那么解决方案很简单：

class MainView extends Component {
  render() {
    return (
      <div>
        <h1>Hello look at my cool widget library</h1>
        <Widget width="600" height="400" />
      </div>
    );
  }
}

您必须确保上面的代码在加载小部件脚本后运行（因此存在Widget组件）。确切的解决方案取决于您的构建系统。

如果您的外部库不是React组件，则无法使用自定义widget标记，您必须呈现实际的HTML。

最大的诀窍是不从render返回，而是在窗口小部件初始化所需内容后手动渲染自己：

class MainView extends Component { render() { // don't render anything return <div/>; }, componentDidMount() { // find the DOM node for this component const node = ReactDOM.findDOMNode(this); // widget does stuff $(node).activateMyCoolWidget(); // start a new React render tree with widget node ReactDOM.render(<div>{this.props.children}</div>, node); } });

请查看portals了解详情。

在React组件中使用常规javascript库

1 个答案: