如何在React中附加到dom？ [英] How to append to dom in React?

问题描述

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

Here's a js fiddle showing the question in action.

在组件的渲染函数中，我使用类 .blah 渲染div。在同一组件的 componentDidMount 函数中，我希望能够选择类 .blah 并追加到它是这样的（因为组件已经安装）

In the render function of a component, I render a div with a class .blah. In the componentDidMount function of the same component, I was expecting to be able to select the class .blah and append to it like this (since the component had mounted)

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

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

However, the appended content does not show up. I also tried (shown also in the fiddle) to append in the same way but from a parent component into a subcomponent, with the same result, and also from the subcomponent into the space of the parent component with the same result. My logic for attempting the latter was that one could be more sure that the dom element had been rendered.

与此同时，我能够（在 componentDidMount 函数中） getDOMNode 并附加到

At the same time, I was able (in the componentDidMount function) to getDOMNode and append to that

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

还有使用CSS样式的理由我希望能够附加一个我知道的类的div。另外，因为根据 docs getDOMNode 已弃用，并且无法使用替换 getDOMNode 来执行相同的操作

yet reasons to do with CSS styling I wished to be able to append to a div with a class that I know. Also, since according to the docs getDOMNode is deprecated, and it's not possible to use the replacement to getDOMNode to do the same thing

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

我认为 getDOMNode 或 findDOMNode 是正确的做法我正在尝试。

I don't think getDOMNode or findDOMNode is the correct way to do what I'm trying to do.

问题：是否可以在React中附加到特定的ID或类？我应该使用什么方法完成我正在尝试做的事情（ getDOMNode ，即使它已被弃用？）

Question: Is it possible to append to a specific id or class in React? What approach should I use to accomplish what I'm trying to do (getDOMNode even though it's deprecated?)

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 。控制台应该显示一个警告。

In JSX, you have to use className, not class. The console should show a warning about this.

修复示例： https://jsfiddle.net/69z2wepo/9974/

您正在使用 React.findDOMNode 不正确。你必须向它传递一个React组件，例如。

You are using React.findDOMNode incorrectly. You have to pass a React component to it, e.g.

var node = React.findDOMNode(this);

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

would return the DOM node of the component itself.

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

However, as already mentioned, you really should avoid mutating the DOM outside React. The whole point is to describe the UI once based on the state and the props of the component. Then change the state or props to rerender the component.

这篇关于如何在React中附加到dom？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！