Question

我是一名JavaScript和React noob，我正在一个有一些功能的网站上工作，比如显示我们的数据队列。我尝试使用chartjs显示带有条形图的队列。我尝试插入他们的示例条形图，看看它只是出于测试目的，我甚至无法让它工作。任何帮助表示赞赏。

import React from 'react';

const QueueDisplay = () =>(
<container>
<h1> QueueDisplay </h1>
<canvas id="myChart" width="400" height="400"></canvas>
  var config = {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
}
  var ctx = document.getElementById("myChart").getContext('2d');
  var myChart = new Chart(ctx, config);

</container>
);

export default QueueDisplay;

我一直收到这个错误：

Syntax error: Unexpected token, expected } (9:8)

   7 | <canvas id="myChart" width="400" height="400"></canvas>
   8 |   var config = {
>  9 |     type: 'bar',
     |         ^
  10 |     data: {
  11 |         labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
  12 |         datasets: [{

Answer 1

你不能在这样的React组件中编写JS。它对JSX无效。 Jonathan Lonowski在评论中很好地提到了这一点的原因。您可以在此处使用Ref并使用它来使用componentDidMount挂钩初始化Chart。并将哑组件转换为类组件，如：

import React, { Component } from "react";

class QueueDisplay extends Component {
  constructor(props) {
    super(props);
  }

  componentDidMount() {
    new Chart(this.canvas, this.config);
  }

  get config() {
    const configData = {
      type: "bar",
      data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [
          {
            label: "# of Votes",
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
              "rgba(255, 99, 132, 0.2)",
              "rgba(54, 162, 235, 0.2)",
              "rgba(255, 206, 86, 0.2)",
              "rgba(75, 192, 192, 0.2)",
              "rgba(153, 102, 255, 0.2)",
              "rgba(255, 159, 64, 0.2)"
            ],
            borderColor: [
              "rgba(255,99,132,1)",
              "rgba(54, 162, 235, 1)",
              "rgba(255, 206, 86, 1)",
              "rgba(75, 192, 192, 1)",
              "rgba(153, 102, 255, 1)",
              "rgba(255, 159, 64, 1)"
            ],
            borderWidth: 1
          }
        ]
      },
      options: {
        scales: {
          yAxes: [
            {
              ticks: {
                beginAtZero: true
              }
            }
          ]
        }
      }
    };

    return configData;
  }

  render() {
    return (
      <container>
        <h1> QueueDisplay </h1>
        <canvas
          id="myChart"
          ref={dom => this.canvas = dom}
          width="400"
          height="400"
        />
      </container>
    );
  }
}

export default QueueDisplay;

Answer 2

将config对象保留在QueueDisplay函数之外，然后使用它。

import React from 'react';

  const config = {
    type: 'bar',
    data: {
        labels: ["Red", "Blue", "Yellow", "Green", "Purple", "Orange"],
        datasets: [{
            label: '# of Votes',
            data: [12, 19, 3, 5, 2, 3],
            backgroundColor: [
                'rgba(255, 99, 132, 0.2)',
                'rgba(54, 162, 235, 0.2)',
                'rgba(255, 206, 86, 0.2)',
                'rgba(75, 192, 192, 0.2)',
                'rgba(153, 102, 255, 0.2)',
                'rgba(255, 159, 64, 0.2)'
            ],
            borderColor: [
                'rgba(255,99,132,1)',
                'rgba(54, 162, 235, 1)',
                'rgba(255, 206, 86, 1)',
                'rgba(75, 192, 192, 1)',
                'rgba(153, 102, 255, 1)',
                'rgba(255, 159, 64, 1)'
            ],
            borderWidth: 1
        }]
    },
    options: {
        scales: {
            yAxes: [{
                ticks: {
                    beginAtZero:true
                }
            }]
        }
    }
}
  const ctx = document.getElementById("myChart").getContext('2d');
  const myChart = new Chart(ctx, config);

const QueueDisplay = () =>(
<container>
<h1> QueueDisplay </h1>
<canvas id="myChart" width="400" height="400"></canvas>
</container>
);

export default QueueDisplay;

语法错误：意外的令牌，预期}

2 个答案: