在React中呈现普通JavaScript

所以我对react是新手，我试图理解非react代码和react代码是如何交互的

例如，假设我有一个库，它在DOM元素中画了一个圆，语法如下：

c=新圆圈（“#容器”）

一旦执行了该代码，就会在DOM元素中绘制一个id为

container

的圆

如果我想基于此创建一个React组件，我该怎么做呢？这就是我的想法：

var circ = React.createClass({

    componentDidMount: function(){
      c = new Circle('#container')
    },

    render: function(){
      return (
        <div id="container"></div>
    );
   }

});

var circ=React.createClass({
componentDidMount:function（）{
c=新圆（“#容器”）
},
render:function（）{
返回(
);
}
});

---

这是可以接受的，还是有更好的方法来实现这一点？

例如，如果您想与

DOM

交互，您可以向某些元素添加特殊的

ref

prop

，例如：

<div ref="blabla"></div>

---

这里我用

ref

“blabla”

隐藏元素是的，您的方法是正确的，但是您需要记住一些时刻

React可以重新渲染它的DOM，并且可以破坏Circle库的绑定。所以使用shouldComponentUpdate（）来控制渲染过程

不要忘记在组件销毁时取消绑定圆库。

---

如果我理解正确，Circle（）将打印出作为参数提供的DOM元素中的一个元素。 如果是我，我会采取不同的方法。不要使用该组件来管理/编辑DOM元素，而是使用它的结果在DOM元素内部打印。因此，如果Circle（）返回一个SVG代码，那么抓取它并在#容器中打印出来。如果是生成base64图像的脚本，则获取要在#内打印的结果

---

我将避免使用react作为DOM管理器，就像您可以使用jQuery一样，而是尝试将react作为块/组件管理器，这样您就可以用另一个组件替换一个组件。

很有趣，但是您建议我如何使用问题中提到的circle对象来实现这一点？我不能在不给circle一个DOM元素来附加它的情况下实例化它，我也不想在不让react知道的情况下创建一个元素来混淆react。这个ref api不推荐使用

ref={el=>this.bar=el}

。您不需要遍历DOM，因为它是实际的HtmleElement或React.Component，所以您可以使用DOM元素方法或实例方法。然后，componentDidMount可以执行新的循环（此.bar）

ReactDOM.findDOMNode(this.refs["blabla"]).style.display='none'