在反应组件内使用自定义对象 [英] Use custom object inside react component
问题描述
我想我真的没有得到这个概念。我想在react组件中创建一个自定义对象。自定义对象本身会创建新元素。
I guess I really don't get the concept. I want to create a custom object inside a react component. The custom objects itself creates new elements.
例如:我有一个自定义对象
For example: I have a custom object
function LabelEditor(canvas, width, height) {
this.canvas = canvas;
this.canvas.width = width;
this.canvas.height = height;
this.canvas.id = 'mainEditor';
this.canvas.getContext('2d');
console.log('hi ' + this.canvas.width + ' / ' + this.canvas.height);
this.getCanvas = function() {
return this.canvas;
};
}
现在我想访问此对象创建的属性,函数和元素反应组件内部,如下所示:
Now I want to access the properties, functions and the elements created by this object inside a react component, something like this:
var Editor = React.createClass({
render: function() {
return (
<div>{this.props.editor.getCanvas()}</div>
);
}
});
React.render(
<Editor editor={new LabelEditor(React.DOM.canvas, 500, 500)} />,
document.getElementsByTagName('editor')[0]
);
但道具,州和某事的每一个组合现在都失败了。
But every combination of props, state and something have failed by now.
这背后的想法是,我想用fabric.js构建一个编辑器,但想在 React.js中使用它
申请。 fabric.js
功能将包含在自定义对象中,并带有控制操作的界面。我想只使用React作为可视部分, LabelEditor
-object将作为控制器,而 fabric.js
作为某种模型,提供一个可绘制的画布。
The idea behind this is, I want to build an editor with fabric.js, but want to use it inside a React.js
application. The fabric.js
functionality will be wrapped inside a custom object with an interface to control the actions. I want to use React only as the visual part, the LabelEditor
-object will as a controller, and the the fabric.js
as some sort of model, providing a drawable canvas.
推荐答案
下面是我如何构造代码(查看此JSBin 以获得有效的演示)。基本上,编辑器组件呈现< canvas>
,您将在 componentDidMount()
中实例化LabelEditor。你使用 React.findDOMNode()
因为< canvas>
在 render()
表示虚拟DOM,您需要找到相应的DOM。现在, LabelEditor
可以进行绘图。
Below is how I would structure the code (See this JSBin for a working demo). Basically, Editor component renders <canvas>
and you would instantiate your LabelEditor in componentDidMount()
. You use React.findDOMNode()
because <canvas>
in render()
represents a virtual DOM and you would need to find the corresponding DOM. Now, LabelEditor
can do the drawing.
function LabelEditor(canvas, width, height) {
this.canvas = canvas;
this.canvas.width = width;
this.canvas.height = height;
this.canvas.id = 'mainEditor';
// Draw something
var ctx = this.canvas.getContext('2d');
ctx.fillStyle = "#A0EBDD"
ctx.fillRect(30, 30, 150, 150);
}
var Editor = React.createClass({
componentDidMount: function() {
var canvas = React.findDOMNode(this.refs.canvas);
this._editor = new LabelEditor(canvas, this.props.width, this.props.height);
},
render: function() {
return (
<canvas ref="canvas"></canvas>
);
}
});
React.render(
<Editor width={500} height={500} />,
document.getElementById('editor')
);
这篇关于在反应组件内使用自定义对象的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!