Question

我正在尝试将一些paperjs代码移植到新的react应用程序中。但是我遇到了一些限制。

在HTML中：目前，我在paperjs中有2个动画文件，每一个动画文件中都有一个与

一起使用的HTML文件。

在React中：以下作品

 componentDidMount() {
    var canvas = document.getElementById("myCanvas");
    paper.setup(canvas);

   require('./Lesson_1.js');

  paper.view.draw();
}

在React中：问题

我需要根据用户选择... BUT将参数动态更改为require（）

const lesson = './Lesson_1.js';
require(lesson)

不起作用，因为require（）函数需要文字！！

问题1：是否有解决方法，因此我可能需要上一堂课，因为我可能还要上很多课？ React似乎忽略了脚本标记

问题2：由于在用户选择其他课程时此组件不会再次装入，因此如何清除同一画布并重新加载新的课程js文件？

我没问题，它目前的工作方式是，但移植响应是个问题。有人建议继续使用旧方法，并在React中创建iframe以显示内容，但我一直在寻找一种更干净的React解决方案，而不依赖其他程序。

感谢您的帮助。

Answer 1

此discussion中提到的一种可能的解决方法是使用switch语句。
这是stackblitz演示解决方案。

class App extends Component {

  componentDidMount() {
    paper.setup('canvas');

    const scriptToLoad = 'a';

    switch (scriptToLoad) {
      case 'a':
        require('./a.js');
        break;
      case 'b':
        require('./b.js');
        break;
    }
  }

  render() {
    return (
      <div>
        <canvas id="canvas"></canvas>
      </div>
    );
  }
}

卡住移植paper.js以反应/ Node.js

1 个答案: