Javascript 将PV（蛋白质查看器）与React集成

我正在尝试与React集成，但无法做到，尝试过搜索，我想我是第一个这样做的人。虽然我遵守了指南，但我还是不能使它起作用

到目前为止，这是我想到的

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;

import React，{Component}来自“React”
类pv扩展组件{
componentDidMount（）{
this.el=this.pvDiv
this.viewer=pv.viewer（this.el，{width:'auto'，height:'auto'，antialas:true}）
this.viewer.on（'viewerReady'，function（）{
console.log（'ready！'）
})
}
render（）{
返回(
this.pvDiv=el}/>
);
}
}
出口违约pv；

首先，您正在调用组件类

pv

，而您的作用域中已经有了一个全局的

pv

，这可能会导致问题

如果你仔细阅读，你的导游会告诉你怎么做

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

其中，

$

是jQuery，例如，

从“jQuery”导入$。这种改变行得通吗

然后，您应该查看浏览器的dev tools控制台中的任何错误日志，如果它正常工作，应该在那里显示“ready！”。如果没有，请打印
this.viewer
的值，以确保它得到构造

您可能会看到“ready！”但屏幕上没有显示任何内容，因为您没有指定任何要可视化的蛋白质。
是
控制台。log
日志记录吗？您是在任何地方导入
pv
对象，还是使用
标记全局导入？