Question

所以我是新手做出反应，我正在努力理解非反应代码和反应代码如何相互作用。

例如，假设我有一个库，它在DOM元素中绘制一个圆圈，其语法如下： c = new Circle('#container')

并且只要执行该代码，就会在DOM元素中绘制一个id为container的圆圈。

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

var circ = React.createClass({

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

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

});

这是可以接受的，还是有更好的方法来解决这个问题？

Answer 1

例如，如果您想与DOM进行互动，可以将特殊ref prop添加到以下元素中：

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

使用常规javascript api或其他非反应apis进行交互。

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

这里我隐藏了ref“blabla”

的元素

Answer 2

是的，您的方法是正确的，但您需要记住的时刻很少。

React可以重新渲染它的DOM，并且可以破坏Circle库的绑定。因此，使用shouldComponentUpdate（）来控制渲染过程。 https://facebook.github.io/react/docs/react-component.html#shouldcomponentupdate
不要忘记在组件销毁时取消绑定Circle库。 https://facebook.github.io/react/docs/react-component.html#componentwillunmount

Answer 3

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

我会避免使用react作为DOM管理器，就像使用jQuery一样，而是尝试将其作为块/组件管理器进行思考，因此您将组件替换为另一个组件。

在React中渲染普通JavaScript

3 个答案: