在TypeScript React web应用程序中使用javascript库

我正试图将a放入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>)
  }

}

---

1-

从“/joint editor”导入JointEditor

2-将jQuery代码移动到

componentDidMount（）

方法（呈现DOM）

---

是

htmldevelment

，它是React元素的根

1-

从“/joint editor”导入JointEditor

2-将jQuery代码移动到

componentDidMount（）

方法（呈现DOM）

---

是

htmldevelment

，它是React元素的根

您的

联合编辑器的扩展名是
.jsx
，它是一个扩展节点/ts。@DanPantry是的，这就是为什么我配置webpack在找到jsx文件时使用BabelJS作为加载程序的原因。这很好，但typescript无法识别这一点（最有可能）好的，但它不应该呈现，因为所有东西都打包在一个包中。js？我要更多地解决您的第一个错误-
编辑器。tsx
将无法“找到”
联合编辑器，因为它的扩展名。您需要在您的网页包配置中设置
解析.extensions
，以包括
.tsx
和
.jsx
>您的
联合编辑器的扩展名是
.jsx
，它是一个扩展节点/ts。@DanPantry是的，这就是为什么我将webpack配置为在找到jsx文件时使用BabelJS作为加载程序的原因。这很好，但typescript无法识别（很可能）好的，但它不应该呈现，因为所有东西都打包在一个包中。js？我要更多地解决您的第一个错误-
编辑器。tsx
将无法“找到”
联合编辑器，因为它的扩展名。您需要在您的网页包配置中设置
解析.extensions
，以包括
.tsx
和
.jsx
>无法使其与jsx文件一起工作，但我在DefiniteTyped上找到JointJS的工作绑定，并且通过componentDidMount的方法工作得很好。谢谢。无法使其与jsx文件一起工作，但我在DefiniteTyped上找到JointJS的工作绑定，并且通过componentDidMount的方法工作得很好。谢谢。
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>
        );
    }
}

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"
            }
        ]
    }
}

const div = ReactDOM.findDOMNode(this)