我想我真的没有得到这个概念。我想在react组件中创建一个自定义对象。自定义对象本身会创建新元素。
例如:我有一个自定义对象
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;
};
}
现在我想在react组件中访问这个对象创建的属性,函数和元素,如下所示:
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]
);
但道具,州和某事的每一个组合现在都失败了。
这背后的想法是,我想用fabric.js构建一个编辑器,但是想在React.js
应用程序中使用它。 fabric.js
功能将包含在自定义对象中,并带有控制操作的界面。我想只使用React作为可视部分,LabelEditor
- 对象将作为控制器,fabric.js
作为某种模型,提供可绘制的画布。
答案 0 :(得分:4)
下面是我如何构建代码(See this JSBin用于工作演示)。基本上,编辑器组件呈现<canvas>
,您将在componentDidMount()
中实例化LabelEditor。您使用React.findDOMNode()
,因为<canvas>
中的render()
代表虚拟DOM,您需要找到相应的DOM。现在,LabelEditor
可以进行绘图。
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')
);