Question

我有一个render()函数正在渲染我的React组件，我希望包含一个<canvas>，其中有一些SVG渲染到它上面，如this fiddle.但是，我不能在渲染函数的return中包含js，所以我试图从我创建的函数中返回canvas元素，然后附加svg。这就是我所拥有的：

getEditionCircle: function(result) {
  	var canvas = <canvas id="can" width="37" height="37"/>
          
        // all the code in the fiddle to render the svg
          
        return canvas;
}

render: function() {
	    
    return (
	     <div className={bemBlocks.item().mix(bemBlocks.container("item"))}>
	        <span className='counterBadge'>{result._source.length}</span>
		<div>{this.getEditionCircle(result)}</div>
	      	<img className='gridImg'
		            style={{height: 311}}
		            src={imgUrl}/>
	    </div>
	)
}

现在当我运行它时，它会说canvas.getContext is not a function对我有意义，因为画布尚未渲染。

编辑：两件相关的事情;我必须将数据传递给此svg生成器（因此results参数），这是将在一个页面上重复多次的组件的一部分，因此将有多个canvas元素具有要呈现给。

Answer 1

如果您想在React创建后访问DOM元素，请使用ref或onRef，explained here。

由于您希望在创建元素后立即使用该元素，请使用onRef：

drawOnCanvas: function(canvas) {
    if (!canvas) {
        return; // Should not happen, but do check anyway
    }

    var ctx = canvas.getContext("2d");

    // the rest of the code in the fiddle to render the svg
}

render: function() {
    return (
        <div className={bemBlocks.item().mix(bemBlocks.container("item"))}>
            <span className='counterBadge'>{result._source.length}</span>
            <canvas onRef={this.drawOnCanvas} width="37" height="37" />
            <img
                className='gridImg'
                style={{height: 311}}
                src={imgUrl}
            />
        </div>
    );
}

Answer 2

是的，由于尚未呈现标识为canvas的{{1}}元素，因此出现错误。这是你应该做的：

将画布直接放在DOM中。不要将它作为返回画布的函数（这是你现在正在做的）

can

使用render: function() { return ( <div className={bemBlocks.item().mix(bemBlocks.container("item"))}> <span className='counterBadge'>{result._source.length}</span> <div> <canvas id="can" width="37" height="37"/> </div> <img className='gridImg' style={{height: 311}} src={imgUrl}/> </div> ) }函数执行画布操作。 componentDidMount偶然在安装（即将JSX转换为HTML）之后但在渲染之前被触发。

componentDidMount

React js：如何将svg绘制到一个不存在的画布中？

2 个答案: