我正在尝试将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 回答
1-
import JointEditor from './joint-editor'
2-将jQuery代码移动到
componentDidMount()
方法(呈现DOM)是
HTMLDivElement
,它是您的React元素的根