坚持将 paperjs 移植到 react/nodejs

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 中：问题

我需要根据用户的选择将参数动态更改为 require()，...但是

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

不起作用，因为 require() 函数需要一个文字 !!

问题 1：是否有解决此问题的方法，以便我可以选择自己选择的课程，因为我可能有更多的课程？ React 似乎忽略了脚本标签

问题2：由于该组件在用户选择其他课程时不会再次挂载，如何清除相同的canvas并重新加载新的课程js文件？

我没问题，它目前的工作方式但移植到 React 是个问题。有人建议保持运行旧方法并在 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>
    );
  }
}

坚持将 paperjs 移植到 react/nodejs

Stuck porting paperjs to react/nodejs

paperjs

reactjs