javascript - 如何在React中附加到dom？

Here's a js fiddle显示正在执行的问题。

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

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

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

同时，我能够(在componentDidMount函数中)添加getDOMNode并将其附加到

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

但我希望能够使用CSS样式添加到我知道的类的div后面。另外，由于不赞成使用docs，所以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'));

最佳答案

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

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

您使用的React.findDOMNode错误。您必须将React组件传递给它，例如

var node = React.findDOMNode(this);

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

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