Question

我正在尝试将PV (protein viewer)与React集成但不能这样做，尝试搜索，我想我是第一个这样做的。虽然我遵循指南here但我仍然无法使其发挥作用。

到目前为止，这是我想出来的。

import React, { Component } from 'react'

class pv extends Component {

  componentDidMount() {
    this.el = this.pvDiv
    this.viewer = pv.Viewer(this.el, { width : 'auto', height : 'auto', antialias : true })
    this.viewer.on('viewerReady', function() {
        console.log('ready!')
    })
  }

  render(){
    return(
        <div>
            <div ref={el => this.pvDiv = el}/>
        </div>
    );
  }

}

export default pv;

Answer 1

第一件事是，当你的范围内已经有一个全局pv时，你正在调用你的组件类pv，这可能会导致问题。

如果您仔细阅读，指南会告诉您

componentDidMount() {
  this.el = $(this.pvDiv);
  ...
}

其中$是jQuery，例如import $ from 'jquery';。它是否适用于这种变化？

然后你应该在浏览器的dev工具控制台中查看任何错误日志，其中＆＃34;准备就绪！＆＃34;应该出现，如果它的工作。如果没有，请打印this.viewer的值以确保它被构造。

您可能会看到＆＃34;准备就绪！＆＃34;但屏幕上没有任何内容，因为您还没有指定任何可视化的蛋白质。

将PV（蛋白质观察者）与React整合在一起

1 个答案: