Попробую портировать paperjs на реакцию / nodejs - PullRequest
Новая
       7

Попробую портировать paperjs на реакцию / nodejs

0 голосов
/ 08 января 2019

Я пытаюсь перенести некоторый код paperjs в новое приложение реагирования. Но я столкнулся с некоторыми ограничениями.

В HTML: В настоящее время у меня есть 2 файла анимации в paperjs, и для каждого из них у меня есть файл HTML, который работает с

В реакции: следующие работы 

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

   require('./Lesson_1.js');

  paper.view.draw();
}

Реагирует: проблема

Мне нужно динамически изменить аргумент в require () в зависимости от выбора пользователя, ... НО 

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

не работает, так как функция require () нуждается в литерале !!

Вопрос 1: Есть ли обходной путь для этого, чтобы я мог потребовать урок по своему выбору, поскольку у меня может быть гораздо больше уроков? React, похоже, игнорирует теги сценария

Вопрос 2. Поскольку этот компонент не монтируется снова, когда пользователь выбирает другой урок, как очистить тот же холст и перезагрузить свежий файл js урока?

У меня нет проблем, способ, которым он работает в настоящее время, но портирование для реакции является проблемой. Кто-то предложил продолжать работать по-старому и создать iframe в реакции, чтобы показать содержимое, но я искал более чистое решение в реакции без зависимостей от других программ.

Спасибо за вашу помощь.

1 Ответ

0 голосов
/ 08 января 2019

Один возможный обходной путь, упомянутый в этом обсуждении , заключается в использовании оператора 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>
    );
  }
}
...