在react组件中使用自定义对象

IT技术 javascript reactjs
2021-05-07 05:05:12

我想我真的不明白这个概念。我想在 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]
);

但是现在每个 props、state 和某些东西的组合都失败了。

这背后的想法是，我想用 fabric.js 构建一个编辑器，但想在React.js应用程序中使用它。该fabric.js功能将被包装在一个自定义对象中，并带有一个用于控制操作的界面。我只想将 React 用作​​可视部分，LabelEditor-object 将用作控制器，而将fabric.js用作某种模型，提供可绘制的画布。

1个回答

下面是我将如何构建代码（有关工作演示，请参阅此 JSBin）。基本上，编辑器组件呈现<canvas>，您将在componentDidMount(). 您可以使用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')
);
其它你可能感兴趣的问题
上一篇基于 api 响应 React 渲染 Chart.js 下一篇react/还原。从其他组件访问状态