小编典典

在React组件内部使用常规javascript库

reactjs

我很好奇在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>
    );
  }
}

阅读 365

收藏
2020-07-22

共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);
  }
});

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

2020-07-22