代码之家  ›  专栏  ›  技术社区  ›  stone rock

如何在reactjs组件中使用普通javascript?

  •  0
  • stone rock  · 技术社区  · 6 年前

    我使用chartist.js,并且在reactjs组件中使用chartist。 我指的是这个 http://gionkunz.github.io/chartist-js/examples.html#simple-pie-chart

    JSITS.JS:

    var Chartist = {
        version:'0.9.5' 
    }
    
    (function (window, document, Chartist) {
    
    var options = {
      labelInterpolationFnc: function(value) {
        return value[0]
      }
    };
    
    var responsiveOptions = [
      ['screen and (min-width: 640px)', {
        chartPadding: 30,
        labelOffset: 100,
        labelDirection: 'explode',
        labelInterpolationFnc: function(value) {
          return value;
        }
      }],
      ['screen and (min-width: 1024px)', {
        labelOffset: 80,
        chartPadding: 20
      }]
    ];
    
    })();
    

    ReactJS组件:

    import React, { Component } from 'react';
    
    var data = {
      labels: ['Bananas', 'Apples', 'Grapes'],
      series: [20, 15, 40]
    };
    
    showPieChart(data){
         new Chartist.Pie('.ct-chart', data, options, responsiveOptions);
    }
    
    class Chart extends Component {
    
      render(){
        return(
          <div>
              <div className="center">
                  {showPieChart}
              </div>
          </div>
    
        )}
    
    }
    
    export default Chart;
    

    网页上不显示任何内容。如何访问香草JavaScript内部的反应组件。

    1 回复  |  直到 6 年前
        1
  •  2
  •   Jordan Enev    6 年前

    你的问题有点误导,可以用两种方式来解释。

    1。如果你问如何将图表库与react集成 这就是你能做到的:

    有一个包装库,已经为我们做到了: https://www.npmjs.com/package/react-chartist

    你可以使用它作为后续(从他们的回购采取的例子):

    import React from 'react';
    import ReactDOM from 'react-dom';
    import ChartistGraph from 'react-chartist';
    
    class Pie extends React.Component {
      render() {
    
        var data = {
          labels: ['W1', 'W2', 'W3', 'W4', 'W5', 'W6', 'W7', 'W8', 'W9', 'W10'],
          series: [
            [1, 2, 4, 8, 6, -2, -1, -4, -6, -2]
          ]
        };
    
        var options = {
          high: 10,
          low: -10,
          axisX: {
            labelInterpolationFnc: function(value, index) {
              return index % 2 === 0 ? value : null;
            }
          }
        };
    
        var type = 'Bar'
    
        return (
          <div>
            <ChartistGraph data={data} options={options} type={type} />
          </div>
        )
      }
    }
    
    ReactDOM.render(<Pie />, document.body)
    

    2。如果您通常询问如何将其他库集成到react中 ,那么我建议您查看官方的react文档,因为有一个关于这个主题的非常好的教程- Integrating with Other Libraries

    所以,如果你不想使用包装库(反应查看器),那么你也可以检查它的主要组件。这是了解如何创建自己的包装的一个很好的起点(遵循react建议): https://github.com/fraserxu/react-chartist/blob/master/index.js