javascript - 完全控制 React.js 组件的内容

Question

如何使 React.js 组件完全控制其 dom 元素的内容？

以下代码创建组件 Smth，该组件由 div 组成，文本作为文本内容传递。保证 text 将是字符串。

var Smth = React.createClass({
  render: function() {
    return React.DOM.div(this.props, this.props.text);
  }
});

ReactDOM.render(
  React.createElement(Smth, { 
    className: 'some-class',
    style: { color: 'blue' },
    text: "Some text goes here" // Nothing except text is here
  }),
  document.querySelector('main')
);

.some-class {
  border: 1px solid green;
  background: silver;
  float: left;
  padding: .25em .5em;
}

<script src="https://fb.me/react-0.14.2.min.js"></script>
<script src="https://fb.me/react-dom-0.14.2.min.js"></script>

<main></main>

我怎样才能做以下事情:

1. React 构建并更新 div(除其内容外)。
2. 脚本控制此 div 的内容，并可以在其中放置文本或标记，而无需与 react 模型进行任何交互。
3. 应该通知脚本有关 text 属性的更改。
   我预计默认情况下会达到这一点。

作为脚本我的意思是在组件内部编写的一些脚本，但在 react 控制之外。我需要独立于 react 来修改元素的内容。

PS:Same question in Russian.

Answer 1

在我看来，您想将 React 与一些非 React 代码结合起来。您可以通过向 div 添加引用，然后在组件安装后使用 componentDidMount 获取对象来实现此目的。然后您可以将其传递给 jQuery 等。

这是来自 http://taylorlovett.com/2015/08/05/modifying-the-dom-with-jquery-within-react-components-in-isomorphic-applications/ 的示例它展示了如何使用 jQuery 工具提示(自从您使用上面的 React 0.14.x 以来，我已经更新了它)。

我还建议切换到 JSX https://facebook.github.io/react/docs/getting-started.html您不会找到很多关于如何使用 JS 调用执行操作的示例。我进行了快速搜索，但无法弄清楚如何在没有 JSX 的情况下设置引用，也许其他人会更幸运......

import React from 'react';
import jQuery from 'jQuery';
class MyComponent extends React.Component {
  componentDidMount() {         
    jQuery(this.myContent).doSomethingWithjQuery();
    jQuery(this.myContent).bind("DOMSubtreeModified", this.contentUpdated);
  },

  shouldComponentUpdate() {
    //tell react not to update
    return false;
  },

 contentUpdated() {
   //do something when external library modifies the dom
 },

  render() {
    <div ref={(el) => { this.myContent = el }">

    </div>
  }
}

有关 React 的更多信息:https://facebook.github.io/react/docs/more-about-refs.html