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

Question

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>")

但是我希望能够使用我知道的类附加到 div 来处理 CSS 样式的原因。此外，由于根据 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'));

Answer 1

在 JSX 中，你必须使用 className，而不是 class。控制台应显示有关此的警告。

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

您错误地使用了 React.findDOMNode。你必须向它传递一个 React 组件，例如

var node = React.findDOMNode(this);

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

然而，正如已经提到的，你真的应该避免在 React 之外改变 DOM。重点是根据组件的状态和属性一次描述 UI。然后更改状态或 Prop 以重新渲染组件。