react-fabricjs 包不起作用

Question

我将在 React 项目中使用 Fabric.js。 我找到了 react-fabricjs 包并将其导入到项目中。

但它不起作用。

import React, { Component } from 'react';
import { fabric, Canvas, Circle, Image, Path, Text } from 'react-fabricjs';
import { connect } from 'react-redux'
import { bindActionCreators } from 'redux'
import { ActionCreators } from '../../redux/action'
import { push } from 'react-router-redux';
import { Router, Route, browserHistory, IndexRoute } from 'react-router';
import Notifications, {notify} from 'react-notify-toast';
import * as controller from '../../lib/controller'

import FileDrop from '../../component/FileDrop'
import firebase from 'firebase'
import FeedbackList from '../../component/FeedbackList'
import FirebaseMedia from '../../component/FeedbackList/media'
import DeleteForm from '../../component/Delete'


require('./index.css')
const sample_word = require('../../resource/images/sample-word.png')
const sample_video = require('../../resource/images/sample-video.png')
const sample_audio = require('../../resource/images/sample-audio.png')
const sample_pdf = require('../../resource/images/sample-pdf.png')
const loadingIcon = require('../../resource/gif/loading.svg')
...
<div className="full-item">
     <div className="full-item-inner">
          <canvas id="c"
                  ref="canvas"
                  width="1000"
                  height="1000">
                  <Image ref="image"
                        imgElement={document.getElementById('my-image')}
                        width={100}
                        height={100}/>
          </canvas>
          <img id="my-image" alt="" src={this.state.workContent} />
     </div>
</div>

我不熟悉 React/Redux。 请帮我。

Answer 1

我找到了为什么 react-fabricjs 包对我不起作用的原因。 因为 react-fabricjs 不支持 Typescript，所以我无法从该包中导入模块。

所以我决定在我的项目中使用 @types/fabric。

npm install --save @types/fabric

希望对其他开发者有所帮助。