整合js代码里面反应成分

Question

我已经转换，显示图表栏的组成部分，它需要这个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> 

我看到的故宫网站这个库，但他们大多是与外部脚本不是内部

这里处理是我的组件：

import React, { Component } from 'react'; 

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

Answer 1

您可以使用refs和componentDidMount回调，以初始化jquery插件，像这样

class App extends React.Component { 
 
    
 
    componentDidMount() { 
 
    $(this.barChart).peity("bar", { 
 
     fill: ["#2D99DC"], width: 130 
 
    }); 
 
    } 
 
    
 
    render() { 
 
    return <div> 
 
     <div ref={ (node) => { this.barChart = node } }> 
 
     <span class="bar">5,3,9,6,5,9,7,3,5,2</span> 
 
     <span class="bar">5,3,2,-1,-3,-2,2,3,5,2</span> 
 
     <span class="bar">0,-3,-6,-4,-5,-4,-7,-3,-5,-2</span> 
 
     </div> 
 
    </div>; 
 
    } 
 
} 
 

 
ReactDOM.render(
 
    <App />, 
 
    document.getElementById('container') 
 
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/peity/3.2.1/jquery.peity.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="container"></div>

Answer 2

您应该使用componentDidMountlifecycle hook。 添加到您的组件代码：

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