在 React 组件中使用常规 javascript 库

IT技术 javascript reactjs
2021-05-17 17:36:39

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

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

  1. 在标题中包含加载标签。
  2. 将代码片段嵌入到您想要的任何位置。

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

<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>
    );
  }
}
1个回答

JSX 的主要目的是让人感觉像 HTML。renderReact 组件中的主要目的是呈现“假”（虚拟）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);
  }
});

查看门户了解更多详细信息。

其它你可能感兴趣的问题
上一篇在带有 PEI 加热床的封闭式 Prusa 式打印机上修复 ABS 角卷曲的最佳方法？ 下一篇使用 Ultimaker 2 移动长打印