Javascript React js：如何将svg绘制到不需要'；还不存在吗？

我有一个

render（）

函数来渲染我的React组件，我想包括一个

函数，它渲染了一些SVG，但是，我不能在render函数的

return

中包含js，所以我试图从我创建的函数中返回canvas元素，然后连接svg。这就是我所拥有的：

getEditionCircle:函数（结果）{
变量画布=
//用于呈现svg的fiddle中的所有代码
返回画布；
}
render:function（）{
返回(
{result._source.length}
{this.getEditionCircle（结果）}
)
}

是由于id为

can

的

画布

元素尚未渲染，因此出现错误。以下是您应该做的：

将画布直接放入DOM中。不要将其作为返回画布的函数（这就是您现在正在做的事情）

---

如果要在React创建DOM元素后访问它，请使用

ref

或

onRef

由于要在创建元素后立即使用该元素，请使用

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>
    );
}

drawincanvas:function（画布）{
如果（！画布）{
return；//不应发生，但仍要进行检查
}
var ctx=canvas.getContext（“2d”）；
//剩下的代码在小提琴中呈现svg
}
render:function（）{
返回(
{result._source.length}
);
}

从技术上讲，这是可行的。但我忘了添加两个重要条件；我需要将参数传递给生成svg的函数，每页将有多个画布元素。现在它只在第一个画布元素上生成svg，这是有意义的，因为它将得到它看到的第一个元素。您能更详细地描述一下吗？每页画布的数量是固定的吗？您需要传递给函数的参数是什么（只是一个一般概念）？如果画布的数量固定，您可以使用单独的ID对它们进行硬编码，并在

componentDidMount

中使用不同的参数调用函数。更详细的想法可以让我更好地帮助您。每个组件有一个画布，但每个页面可能有数百个组件。参数非常简单，基本上是一个由四个字段组成的数组，用于呈现特定的svg。有没有一种方法可以让类似于

svg

的元素直接/立即在

render

函数中呈现，而不是从文档中选择画布，然后在其上放置svg？我意识到这并不是一个理想的反应解决方案。这里画布操作的问题是它们都有相同的id，所以每个组件都在

componentDidMount

中触发该方法，但都以第一个元素为目标。您可以使用道具来确保ID不同。因此，在每个组件的父页面中，执行类似于

的操作，其中

i

是一些计数器或用于唯一ID的操作。在组件do

的
render
函数中，您还可以将参数（我猜在主页中确定）作为道具传递给组件，并在组件
componentDidMountFunction
中访问这些道具以呈现SVG。这类似于
id
作为道具传递并由组件使用的方式。出于某种原因，我总是将
canvas
视为未定义。另外，我不得不使用
onRef={this.drawOnCanvas（）}
来代替您给出的语法，因为它抱怨
drawOnCanvas
未定义，并且没有括号，它从未被调用过。啊，您在我的回答中发现了一个错误。它应该是
onRef={this.drawincanvas}
。我已经更新了答案。注意：不要像您的注释中描述的那样直接调用该方法（省略
（）
）。我还需要将参数传递给
drawincanvas
函数；有办法吗？如果您将
.bind（this）
绑定到
onRef={this.drawincanvas.bind（this）}
，那么drawincanvas可以通过
this
访问组件实例。因此，您可以访问
this.props
或
this.state
内部
drawincanvas
。请注意，
onRef
只调用一次，因此如果需要重新渲染
drawOnCanvas
，则需要以某种方式触发它。另一种方法是
.bind（this，arg1，arg2）
，然后用参数
arg1
和
arg2
调用它；它是
ref
而不是
onRef
。除此之外，它还能工作，谢谢：）
componentDidMount: function(){
    //all the code in the fiddle
}

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>
    );
}