Reactjs 在react组件中集成js代码

我已经转换了一个显示图表栏的组件，它需要运行这个js代码段，在我的JSX代码中集成它的正确方法是什么

<script>
    /** START JS Init "Peity" Bar (Sidebars/With Avatar & Stats) from sidebar-avatar-stats.html **/
    $(".bar.peity-bar-primary-avatar-stats").peity("bar", {
        fill: ["#2D99DC"],
        width: 130,
    })
</script>

/**从sidebar-Avatar-Stats.html启动JS Init“Peity”栏（侧栏/带有头像和统计信息）**/
$（“.bar.peity bar主要化身统计数据”）.peity（“bar”{
填写：[“#2D99DC”]，
宽度：130，
})

我在npm网站上看到过这个库，但它们主要处理外部脚本，而不是内部脚本

以下是我的组件：

import React, { Component } from 'react';

export default class App extends Component {
  render() {
    return (
    <div>
          "How can I render js code here?" 
     </div>
    );
  }
}

import React，{Component}来自'React'；
导出默认类应用程序扩展组件{
render（）{
返回(
“如何在此处呈现js代码？”
);
}
}

您可以使用和回调来初始化jquery插件，如下所示

类应用程序扩展了React.Component{
componentDidMount（）{
$（this.barChart）.peity（“bar”，{
填充：[“#2D99DC”]，宽度：130
});
}
render（）{
返回
{this.barChart=node}}>
5,3,9,6,5,9,7,3,5,2
5,3,2,-1,-3,-2,2,3,5,2
0,-3,-6,-4,-5,-4,-7,-3,-5,-2
;
}
}
ReactDOM.render(
,
document.getElementById（'容器'）
);

您应该使用。
将其添加到组件代码中：

componentDidMount() {
 $(".bar.peity-bar-primary-avatar-stats").peity("bar", {
        fill: ["#2D99DC"],
        width: 130,
    })
}