我将一个对象作为参数传递给React组件的构造函数。然后,我想调用对象中的一个函数,但是出现了以下错误信息:
这里是我如何实例化Wbs的方法:
我可以在Wbs的构造函数中看到json对象: console.log(layout.cy.elements().jsons());
Uncaught TypeError: _this.layout.getWbsLayout is not a function
at new Wbs (Wbs.tsx:50)
at react-dom.js:4749
at measureLifeCyclePerf (react-dom.js:4529)
at ReactCompositeComponentWrapper._constructComponentWithoutOwner (react-dom.js:4748)
at ReactCompositeComponentWrapper._constructComponent (react-dom.js:4734)
at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4642)
at Object.mountComponent (react-dom.js:11542)
at ReactCompositeComponentWrapper.performInitialMount (react-dom.js:4825)
at ReactCompositeComponentWrapper.mountComponent (react-dom.js:4712)
at Object.mountComponent (react-dom.js:11542)
我阅读了一些有关在构造函数中将方法绑定到this的帖子,但由于我调用的是作为参数传递的对象的函数,因此我不确定此处是否适用,并且仍然收到了类似的消息,即bind不是一个函数
。
这是我的代码,Wbs
是根React组件,WbsLayout
是我作为参数传递给Wbs构造函数的对象。
错误发生在构造函数中,当我执行this.layout.getWbsLayout()
时。请注意,我尝试在ComponentDidMount
中调用该函数,但是仍然出现了相同的错误。
import * as React from 'react';
import WbsLayout from "../layout/WbsLayout";
interface WbsProps {}
interface WbsState {
wbsElements: any[];
wbsEdges: any[]
}
class Wbs extends React.Component<WbsProps, WbsState>{
public cy: Cy.Instance;
private layout: WbsLayout;
private s: snap.Paper;
private renderer: WbsRenderer;
public state : WbsState;
constructor(props: WbsProps, layout: WbsLayout) {
super(props);
this.layout = layout;
this.cy = this.layout.cy;
// this does show a json object in the console, hence layout can be accessed
console.log(layout.cy.elements().jsons());
this.layout.getWbsLayout(); //The error happens here
// initial state
this.state = {
wbsElements: [],
wbsEdges: [],
};
}
public render() {
const wbsElements: any = this.state.wbsElements.map((element: any) => (
<WbsElement
key={element.wbsElementBox.nodeId}
wbsElementBox={...element.wbsElementBox}
wbsElementTitle={...element.wbsElementTitle}
wbsElementId={...element.wbsElementId}
/>
));
const wbsEdges: any = this.state.wbsEdges.map((edge: any) => (
<WbsEdge
key={edge.edgeId}
edgeId={edge.edgeId}
sourceWbsElementData={...edge.sourceWbsElementData}
targetWbsElementData={...edge.targetWbsElementData}
/>
));
return (
<svg>
{wbsElements}
{wbsEdges}
</svg>
);
}
}
export default Wbs;
这里介绍一下WbsLayout
:
导出WbsLayout
类:
public cy: Cy.Instance;
constructor(graph: any, Options?: Options) {
this.cy = cytoscape({
headless: true,
elements: graph
});
}
public getWbsLayout(): any {
const wbsElements: any = this.cy.collection("node[visibility = 'visible']").map((n: Cy.CollectionNodes) =>
({
wbsElementBox: {
nodeId: n.data().id,
x: n.data().x,
y: n.data().y,
width: n.data().width,
height: n.data().height
},
wbsElementTitle: {
text: n.data().title
},
wbsElementId: {
text: n.data().wbsId
}
})
);
const wbsEdges: any = [
{
edgeId: '5',
sourceWbsElementData: {
nodeId: '1',
x:464.359375,
y:30,
width:100,
height:40,
layoutStyle: 0
},
targetWbsElementData: {
nodeId:'1.5',
x:867.875,
y:100,
width:130.84375,
height:40,
layoutStyle: 1
}
}
];
return {
wbsElements,
wbsEdges
};
}
....
}
export default WbsLayout;
这里是我如何实例化Wbs的方法:
let graph: any = {
nodes: [],
edges: []
};
let layout: WbsLayout = new WbsLayout(graph);
let wbs = new Wbs(null, layout);
我可以在Wbs的构造函数中看到json对象: console.log(layout.cy.elements().jsons());
wbsElements
和wbsEdges
函数。 - Andrew LiReact.createElement
在实例化您的组件时,没有将WbsLayout
实例传递给您的构造函数。 - Andrew Lilayout
传递给构造函数的?在 React 中,如果你想要传递一些东西,你可以使用props
。 - Nitzan Tomer