在 TypeScript React 网络应用程序中使用 javascript 库

Question

我正在尝试将 graphical editor 放入 React 组件中，但该项目是在 TypeScript.

上设置的

没有针对 JointJS 的更新绑定，这就是我尝试以下操作的原因：将来自 JointJS 的代码渲染到 .jsx 文件中的 React 组件中

文件：联合-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 文件中的另一个组件

文件editor.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）转译

现在出现了两个问题：

错误.../editor.tsx (3,30): 错误 TS2307: 找不到模块 './joint-editor'.
我很确定在 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 Element

的根

在 TypeScript React 网络应用程序中使用 javascript 库

Use javascript library inside of TypeScript React web app

javascript

jointjs

typescript

reactjs

babeljs