1

我正在尝试使用在工作线程中完成处理的反应组件来更新画布。我在 EMCA5 中的所有困难部分都可以正常工作，但是移植到 React/Babel/JSX，我最大的问题是系统不再识别 ArrayBuffer 来将数据传递给工作线程。以下代码因“TypeError：ArrayBuffer 不是构造函数”而死：

import React from 'react';
// import Calculater etc...

export default class CalculationDisplay extends React.Component {
    componentDidMount() {
        var buffer = new ArrayBuffer(100 * 100 * 4);
        var view = new Uint32Array(buffer);
        var calculator = new Calculator(view);
        const ctx = this.refs.canvas.getContext('2d');
        // worker calculation and display goes here...
    }

    render() {
        return (
            <canvas ref="canvas" width={600} height={600}/>
        );
    }
}

在对 babel-polyfill 和 core-js 进行了大量研究之后，我能想到的所有变体都以同样的方式消失：

var ArrayBuffer = require('core-js/modules/es6.typed.array-buffer');
import ArrayBuffer from 'core-js/modules/es6.typed.array-buffer';
import { ArrayBuffer } from 'core-js/modules/es6.typed.array-buffer';
import { ArrayBuffer } from 'babel-polyfill';

到目前为止，我发现唯一可行的方法是忘记任何导入/要求，只需访问 ArrayBuffer 就可以了：

    var buffer = new global.ArrayBuffer(100 * 100 * 4);
    var view = new global.Uint32Array(buffer);

..这实际上有效并且显示显示在页面上，但它看起来很难看，我无法想象这是引用 ArrayBuffer 的预期方式。有没有人成功导入 js ArrayBuffer 和相关类，以便可以按预期访问它们？

..OK 遵循 zerkms 的建议，我更新为：

import React from 'react';
import 'babel-polyfill';
// import Calculater etc...

export default class CalculationDisplay extends React.Component {
    componentDidMount() {
        var buffer = new ArrayBuffer(100 * 100 * 4);
        var view = new Uint32Array(buffer);
. . .

..它可以正常工作 - 我想我之前尝试从 babel-polyfill 导入类名太花哨了。

4

0 回答 0