如何在Reactjs组件中使用原生JavaScript？

Question

我正在使用 chartist.js，并在 reactjs 组件中使用 chartist。我参考了这个链接：http://gionkunz.github.io/chartist-js/examples.html#simple-pie-chart

chartist.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;

网页上没有显示任何内容。我该如何在React组件内访问原生JavaScript？

- stone rock

---

考虑使用数据调用函数，而不是传递函数的引用。 - baao

@baao 我该如何在我的React组件中访问.js文件中的函数/方法？ - stone rock

这里有好的解释-> https://reactjs.org/docs/integrating-with-other-libraries.html ，附带基本的例子。 - peja

@stonerock，我遇到了你曾经遇到的问题，即包装器缺少功能，决定在ReactJs内部进行原生集成。你能帮忙解决https://stackoverflow.com/questions/64160680/how-to-integrate-plain-vanilla-javascript-inside-reactjs/64160798?noredirect=1#comment113458284_64160798吗？ - Daniel

Answer 1

你的问题有点误导，可以有两种解释。

#1. 如果你想知道如何将Chartist库与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)

如果您想了解如何将其他库集成到React中，我建议您查看官方的React文档，因为有一个关于这个主题的非常好的教程 - 与其他库集成。

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

- Jordan Enev

---

是的，我知道我们可以利用react-chartist，但它只是chartist.js的包装器，而且react-chartist缺少许多功能。 - stone rock

我想在我的React组件中使用vanilla JavaScript的chartist.js库。我可以创建一个.js文件，如何在React组件（即.jsx文件）中访问这些函数？ - stone rock

因此，如果您不想使用该库（包装库），则可以检查其主要组件。这是一个很好的起点（遵循React建议），以了解如何创建自己的包装器：https://github.com/fraserxu/react-chartist/blob/master/index.js - Jordan Enev