时间戳

首页 > 解决方案 > React 中的第三方 DOM 操作

jquery - React 中的第三方 DOM 操作

问题描述

我目前正在将遗留的 BackboneJS 应用程序移植到 ReactJS。该应用程序使用VexFlow，JavaScript 音乐符号渲染引擎。我遇到的主要问题之一是 VexFlow 以与 D3 类似的方式将所有内容呈现给 SVG。有很多关于将 D3 与 React 相结合的信息，我正在遵循在这种情况下使用空 Reactref元素作为我的 VexFlow 渲染目标的一般做法，这一切都发生在componentDidMount：

export default class ScoreComponent extends React.Component {

  constructor(props) {
    super(props);
    // Create a 'ref' object, which allows us to reference the React DOM
    // element we create in the render method.
    this.scoreElem = React.createRef();
    ...
  }

  componentDidMount() {
    var score = this.score;
    var elem = this.scoreElem.current;
    score.setElem(elem).render(); // <- All VexFlow rendering happens here...
    ...
  }

  render() {
    return (
      <div className="score" id={this.props.scoreId} ref={this.scoreElem}></div>
    );
  }

}

虽然这可行，但让我很不舒服，特别是因为我还必须添加相当多的 jQuery 代码来处理 SVG 元素上的用户交互（例如，单击和拖动复杂的路径对象），而 React 不会意识到这些.

所以我的问题是：我是否走在一条会导致我被烧伤的道路上？我真的很喜欢 React，并且很想和 Backbone 说再见。我能够在一个周末轻松地移植我的大部分 UI 代码。我过去看过 Angular，但它似乎太复杂了，而且自以为是。

标签： jqueryreactjsdomsvg

解决方案

你正朝着正确的方向前进。当您需要使用外部非 React DOM 库在 React 中渲染内容时，可以这样做：

  1. 在构造函数中创建一个 DOM 元素的引用。
  2. 在 上启动插件实例componentDidMount()，并添加对插件实例的引用作为组件实例的属性。这将使您能够从其他方法调用实例的方法。
  3. 对componentDidUpdate(). 使用对插件实例的引用来更新它。
  4. componentWillUnmount()明确插件添加/计划/等的所有内容...例如事件侦听器、超时/间隔、在 React 树之外创建的 DOM 节点、正在进行的 AJAX 调用等...
  5. 在渲染中 - 不要向容器添加任何属性，因此不会在道具/状态更改时重新渲染。

注意：在 React 16.3 之前，标准方法是通过返回falsein来防止重新渲染 props/state 更改shouldComponentUpdate()，并对 .props 中的 props 更改做出反应componentWillReceiveProps()。然而后者正在被弃用，前者将在未来成为推荐而不是严格的命令。

这个（非工作）示例大致基于当前的VexFlow 教程：

export default class ScoreComponent extends React.Component {
  constructor(props) {
    super(props);
    // 1. create a ref to a DOM element
    this.scoreElem = React.createRef();
    ...
  }

  componentDidMount() {
    const { size } = this.props;
    const elem = this.scoreElem.current;
    // 2. add a reference to the plugin's instance, so you   
    //    can call the plugin in other lifecycle methods
    this.renderer = new VF.Renderer(elem, VF.Renderer.Backends.SVG)
    renderer.resize(size.w, size.h);
    this.context = renderer.getContext();
    ...
  }  

  componentDidUpdate (prevProps) {
    // 3. if the props effect the plugin
    // do something with the plugin
    // for example:
    const { size } = this.props;
    if(size !== prevProps.size) this.renderer.resize(size.w, size.h);
  }

  componentWillUnmount() {
    // 4. teardown:
    // run VexFlow destroy method if available
    // remove non react event listeners
    // clear timeouts and intervals
    // remove DOM nodes rendered outside of react container
    // cancel ongoing AJAX calls
    // etc...
  }

  render() {
    // 5. use only ref on the returned element, any use of properties/state might rerender the element itself.
    return (
      <div className="score" ref={this.scoreElem}></div>
    );
  }

}

推荐阅读