在TypeScript React Web應用程序內使用JavaScript庫

Question

我試圖將圖形編輯器放入React組件中，但是該項目是在TypeScript上設置的。

沒有針對JointJS的更新綁定，這就是我嘗試以下操作的原因：將來自JointJS的代碼呈現到.jsx文件中的React組件中

文件：joint-editor.jsx

import React from 'react'
import $ from 'jquery'
import joint from 'jointjs'

export default class JointEditor extends React.Component {

  constructor(props){
    super(props)
  }

  render(){
    var graph = new joint.dia.Graph;

      //JointJS code using jQuery

      graph.addCells([rect, rect2, link]);

      return (<div id="myholder"></div>)
  }

}

然后導入此組件到另一個組件的.tsx文件

文件編輯器

import React = require('react')
import Header = require("./../Header/header")
import JointEditor = require('./joint-editor')

class DemoProps {
    public name: string;
    public age: string;
}

export class Editor extends React.Component<DemoProps, {}> {
    private foo: number;

    constructor(props: DemoProps) {
        super(props);
        this.foo = 42;
    }

    render() {
        return (
            <div>
                <Header.Header/>
                <JointEditor/>
                Hello {this.props.name}, you are {this.props.age} years old
                </div>
        );
    }
}

它由webpack捆綁，並由Babel（jsx文件）和TypeScript（tsx）進行轉譯

現在出現兩個問題：

1. ... / editor.tsx（3,30）中的錯誤：錯誤TS2307：找不到模塊“ ./聯合編輯器”。

2. 我很確定在React的render（）方法內部使用jQuery的JointJS會有問題嗎？ 您是否知道在React組件中成功使用jQuery的任何示例？

謝謝

編輯

這是我的webpack.config.js

var webpack=require('webpack');
module.exports={
    entry: ['./src/main.tsx'],
    output: {
        path: './target',
        publicPath: "/assets/",
        filename: 'bundle.js'
    },
    debug: true,
    devtool: 'cheap-eval-source-map',
    plugins: [
        new webpack.optimize.DedupePlugin(),
        new webpack.optimize.UglifyJsPlugin({minimize: true})
    ],
    resolve: {
        extensions: ['',  '.jsx','.ts', '.js', '.tsx',]
    },
    module: {
        loaders: [
            {
                test: /\.tsx$/,
                loader: 'react-hot!ts-loader'
            },{
                test:/\.jsx$/,
                exclude: /(node_modules|bower_components)/,
                loader:"react-hot!babel-loader"
            },
            {
                test:/\.js$/,
                exclude: /(node_modules|bower_components)/,
                loader:"babel-loader"
            }
        ]
    }
}

Answer 1

1- import JointEditor from './joint-editor'

2-將您的jQuery代碼移動到componentDidMount()方法（呈現DOM）

const div = ReactDOM.findDOMNode(this)

是HTMLDivElement ，它是React元素的根