在 TypeScript React Web 应用程序中使用 javascript 库答案

【问题标题】：Use javascript library inside of TypeScript React web app在 TypeScript React Web 应用程序中使用 javascript 库
【发布时间】：2015-10-30 12:48:15
【问题描述】：

我正在尝试将 graphical editor 放入 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 文件中的另一个组件中

文件编辑器.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）转译

现在出现2个问题：

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

【问题讨论】：

你的joint-editor的扩展名是.jsx，即扩展节点/tsdo not resolve by default。
@DanPantry 是的，这就是为什么我将 webpack 配置为在找到 JSX 文件时使用 BabelJS 作为加载器。
没关系，但打字稿不会识别（很可能）
好的，但它不应该渲染，因为一切都打包在一个 bundle.js 中吗？
我更多的是解决您的第一个错误 - editor.tsx 由于其扩展名而无法“找到”joint-editor。您需要在 webpack 配置中设置 resolve.extensions 以包含 .tsx 和 .jsx

标签： javascript reactjs typescript babeljs jointjs

【解决方案1】：

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

2- 将您的 jQuery 代码移动到 componentDidMount() 方法（渲染 DOM）

const div = ReactDOM.findDOMNode(this)

是HTMLDivElement，它是你的 React 元素的根

【讨论】：

无法让它与 jsx 文件一起使用，但我发现 JointJS 的绑定工作在 DefinitiveTyped 上，并且通过 componentDidMount 的方法效果很好。谢谢。