首页 文章

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

提问于
浏览
1

我正在尝试将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>)
  }

}

然后 importing 将此组件放入.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)转换

现在出现2个问题:

  • 错误在... / editor.tsx(3,30):错误TS2307:找不到模块'./joint-editor' .

  • 我很确定在React的render()方法中使用jQuery会有JointJS的问题吗?您是否知道在React组件中成功使用jQuery的任何示例?

谢谢

EDIT

这是我的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"
            }
        ]
    }
}

1 回答

  • 0

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

    2-将jQuery代码移动到 componentDidMount() 方法(呈现DOM)

    const div = ReactDOM.findDOMNode(this)
    

    HTMLDivElement ,它是您的React元素的根

相关问题