Question

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

以下代码创建组件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>

我如何做以下事情：

React构建并更新除内容之外的div。
脚本控制此div的内容，可以在其中放置文本或标记，而不与react模型进行任何交互。
脚本应该被告知text属性的更改我希望默认情况下会达到这一点。

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

PS：Same question in Russian.

Answer 1

听起来我想要将React与一些非React代码结合起来。您可以通过向div添加ref，然后使用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 refs的更多信息：https://facebook.github.io/react/docs/more-about-refs.html

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

1 个答案: