Question

我正在尝试使用winwheel.js库来配置和渲染轮子以对div进行样式化和动画处理。该文档显示了如何创建Vanilla JS组件。但是，我正在使用React，并且文档没有显示如何在React中使用Vanilla JS组件。

我将npm软件包winwheel添加到我的package.json中。我尝试过创建一个React组件，并在其中编写香草JS，然后将其导入到我的React Component中。我还尝试创建一个类Component并设置this.wheel = new WinWheel（{configuration}）;然后返回渲染的轮子。

我还尝试在React组件中创建一个元素，并将其放在canvas标签内。这是我的React组件。

`import React from 'react';
 import Wheel from './Wheel.js';

    class Dashboard extends React.Component {


      render() {
         return (
          <>
            {/* <Wheel /> */}
            <canvas id='myCanvas' width='880' height='300'>
                {Wheel}
            </canvas>
          </>
      }`

这是我创建Wheel组件的一种方式：

 `import Winwheel from 'winwheel';

   let Wheel = new Winwheel({
     'canvasId': 'myCanvas',
     'numSegments': 4,
     'segments':
     [
        { 'fillStyle': '#eae56f', 'text': 'Prize One' },
        { 'fillStyle': '#89f26e', 'text': 'Prize Two' },
        { 'fillStyle': '#7de6ef', 'text': 'Prize Three' },
        { 'fillStyle': '#e7706f', 'text': 'Prize Four' }
     ],
     'animation':
    {
      'type': 'spinToStop',
      'duration': 5,
      'spins': 8
    }
  });

  export default Wheel;`

我也尝试创建一个React Wheel组件，但是那也不起作用：

   `import React from 'react';
    import { Winwheel } from 'winwheel';

   class Wheel extends React.Component {
      constructor() {
      super();
      this.wheel = new Winwheel({
        'numSegments': 4,
        'segments':
            [
                { 'fillStyle': '#eae56f', 'text': 'Prize One' },
                { 'fillStyle': '#89f26e', 'text': 'Prize Two' },
                { 'fillStyle': '#7de6ef', 'text': 'Prize Three' },
                { 'fillStyle': '#e7706f', 'text': 'Prize Four' }
            ],
        'animation':
        {
            'type': 'spinToStop',
            'duration': 5,
            'spins': 8
            }
        });

       }

    render() {
      return (
        <div>{this.wheel}</div>
      )
    }


   }

   export default Wheel;`

这是错误消息：

Objects are not valid as a React child (found: object with keys {canvasId, centerX, centerY, outerRadius, innerRadius, numSegments, drawMode, rotationAngle, textFontFamily, textFontSize, textFontWeight, textOrientation, textAlignment, textDirection, textMargin, textFillStyle, textStrokeStyle, textLineWidth, fillStyle, strokeStyle, lineWidth, clearTheCanvas, imageOverlay, drawText, pointerAngle, wheelImage, imageDirection, segments, animation, canvas, ctx, pointerGuide}). If you meant to render a collection of children, use an array instead.

Answer 1

由于尝试将对象渲染为React组件而出现此错误，这是不可能的。根据Winwheel.js的文档，我发现需要运行它才能在canvas元素中创建滚轮。您可以做的是：

import React, { Component } from "react";
import Winwheel from "winwheel";

class Dashboard extends Component {
  componentDidMount() {
    const theWheel = new Winwheel({
      canvasId: "myCanvas",
      numSegments: 4,
      segments: [
        { fillStyle: "#eae56f", text: "Prize One" },
        { fillStyle: "#89f26e", text: "Prize Two" },
        { fillStyle: "#7de6ef", text: "Prize Three" },
        { fillStyle: "#e7706f", text: "Prize Four" },
      ],
      animation: {
        type: "spinToStop",
        duration: 5,
        spins: 8,
      },
    });
  }

  render() {
    return <canvas id="myCanvas" width="880" height="300"></canvas>;
  }
}

export default Dashboard;

或：

import React, { useEffect } from "react";
import Winwheel from "winwheel";
const Dashboard = () => {
  useEffect(() => {
    const theWheel = new Winwheel({});
  }, []);
  return <canvas id="myCanvas" width="880" height="300"></canvas>;
};

export default Dashboard;

如何将Vanilla JS组件合并到React中

1 个答案: