如何在React中附加到dom？

Question

这是一个js小提琴， 显示了实际的问题。

在组件的render函数中，我使用class渲染div
.blah。在componentDidMount相同组件的功能中，我期望能够选择类.blah并像这样附加到它（因为组件已经安装）

$('.blah').append("<h2>Appended to Blah</h2>");

但是，附加内容不会显示。我还尝试（也显示在小提琴中）以相同的方式进行添加，但从父组件到子组件的追加结果相同，并且也从子组件到父组件的空间进行追加结果。我尝试后者的逻辑是，可以更确定dom元素已被渲染。

同时，我能够（在componentDidMount函数中）getDOMNode添加到

 var domnode = this.getDOMNode(); 
 $(domnode).append("<h2>Yeah!</h2>")

但是我希望能够使用CSS样式添加到我知道的类的div后面。另外，由于根据文档 getDOMNode不推荐使用，因此无法使用替代getDOMNode方法执行相同的操作

 var reactfindDomNode = React.findDOMNode();
 $(reactfindDomNode).append("<h2>doesn't work :(</h2>");

我不认为getDOMNode或者findDOMNode是做什么，我试图做的正确方法。

问题： 是否可以在React中附加到特定的ID或类？我应该使用哪种方法来完成我要完成的工作（getDOMNode即使已弃用）？

var Hello = React.createClass({
    componentDidMount: function(){

       $('.blah').append("<h2>Appended to Blah</h2>");
       $('.pokey').append("<h2>Can I append into sub component?</h2>");
       var domnode = this.getDOMNode();
       $(domnode).append("<h2>appended to domnode but it's actually deprecated so what do I use instead?</h2>")

       var reactfindDomNode = React.findDOMNode();
       $(reactfindDomNode).append("<h2>can't append to reactfindDomNode</h2>");

    },
    render: function() {
        return (
            <div class='blah'>Hi, why is the h2 not being appended here?
            <SubComponent/>
            </div>
        )
    }
});

var SubComponent = React.createClass({

      componentDidMount: function(){
         $('.blah').append("<h2>append to div in parent?</h2>");
      },

      render: function(){
         return(
              <div class='pokey'> Hi from Pokey, the h2 from Parent component is not appended here either?            
              </div>
         )
      }
})

React.render(<Hello name="World" />, document.getElementById('container'));

Answer 1

在JSX中，您必须使用className，而不是class。控制台应对此显示警告。

固定示例：https :
//jsfiddle.net/69z2wepo/9974/

您使用React.findDOMNode不正确。您必须将React组件传递给它，例如

var node = React.findDOMNode(this);

将返回组件本身的DOM节点。

但是，正如已经提到的，您实际上应该避免在React之外对DOM进行变异。整点是描述UI 一旦 基于状态和组件的道具。然后更改状态或道具以重新渲染组件。