在 React 中渲染正常 JavaScript

Question

所以我是 React 的新手，我正在尝试了解非 React 代码和 React 代码如何交互。

例如，假设我有一个库，它使用如下语法在 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 元素内打印出一个元素。如果是我，我会有不同的做法。不要将该组件用于 manage/edit DOM 元素，而是使用它的结果打印在 DOM 元素内。所以，如果 Circle() returns 一个 SVG 代码抓住它并在 #container 中打印出来。如果是生成base64图片的脚本，获取结果打印在#里面。

我会避免将 React 用作 DOM 管理器，就像您可以使用 jQuery 一样，而是尝试将 React 视为 blocks/components 管理器，因此您替换了一个组件与另一个。

在 React 中渲染正常 JavaScript

Render Normal JavaScript in React

javascript

dom

components

web-component

reactjs