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

【问题标题】：How to incorporate Vanilla JS components into React如何将 Vanilla JS 组件合并到 React 中
【发布时间】：2019-07-02 12:48:32
【问题描述】：

我正在尝试使用 winwheel.js 库来配置和渲染轮子以设置样式和动画 div。该文档展示了如何创建一个 Vanilla JS 组件。但是，我正在使用 React，文档没有显示如何在 React 中使用 Vanilla JS 组件。

我将 npm 包 winwheel 添加到我的 package.json 中。我尝试创建一个 React 组件，并在其中编写 vanilla JS，然后将其作为 .我还尝试创建一个类 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.

【问题讨论】：

从 winwheel 的示例中，我看到您不应该添加 {wheel}。尝试像这样只渲染画布标签：

标签： javascript reactjs

【解决方案1】：

由于尝试将对象渲染为反应组件，您会收到该错误，这是不可能的。按照 Winwheel.js 的文档，我发现需要运行它才能在画布元素中创建轮子。你可以做的是：

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;

【讨论】：