反応コンポーネント内で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> 

私はNPMのウェブサイトでこのライブラリを見てきましたが、彼らはほとんどここに

は私のコンポーネントであり、内部ではない外部スクリプトを扱う：

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, 
    }) 
}