All geek questions in one place

How to add to dom in React?

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

In the component rendering function, I render the div with the .blah class. In the componentDidMount function of the same component, I expected that I could select the .blah class and add to it like this (since the component was installed)

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

However, the added content is not displayed. I also tried (also shown in the violin) to add the same, but from the parent component to the subcomponent, with the same result, and also from the subcomponent to the space of the parent component with the same result. My logic for trying the latter was to be more certain that the dom element was provided.

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

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

all the same reasons for styling CSS I would like to add to the div with the class that I know. Also, since according to docs, getDOMNode deprecated, and using replace with getDOMNode not possible to do the same thing

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

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

Question: Can I add to a specific id or class in React? Which approach should I use to accomplish what I'm trying to do ( getDOMNode , although is it 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 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'));
+6
source share
3 answers

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

Fixed example: https://jsfiddle.net/69z2wepo/9974/

You are using React.findDOMNode incorrectly. You must pass it a React component, for example.

 var node = React.findDOMNode(this);

will return the DOM node of the component itself.

However, as already mentioned, you really should avoid mutating the DOM outside of React. The thing is to describe the UI once based on the state and support of the component. Then change the state or details to replay the component.

+4
source

Avoid using jQuery inside the reaction as it becomes a bit antipattern. I use this a little on my own, but only for searching / reading, which are too complicated or almost impossible, just reacting to the components.

In any case, to solve your problem, you can simply use the state object:

 <!DOCTYPE html> <html> <head> <title></title> <script src="https://fb.me/react-0.13.3.js"></script> </head> <body> <div id='container'></div> <script> 'use strict'; var Hello = React.createClass({ displayName: 'Hello', componentDidMount: function componentDidMount() { this.setState({ blah: ['Append to blah'], pokey: ['pokey from parent'] }); }, getInitialState: function () { return { blah: [], pokey: [] }; }, appendBlah: function appendBlah(blah) { var blahs = this.state.blah; blahs.push(blah); this.setState({ blah: blahs }); }, render: function render() { var blahs = this.state.blah.map(function (b) { return '<h2>' + b + '</h2>'; }).join(''); return React.createElement( 'div', { 'class': 'blah' }, { blahs: blahs }, React.createElement(SubComponent, { pokeys: this.state.pokey, parent: this }) ); } }); var SubComponent = React.createClass({ displayName: 'SubComponent', componentDidMount: function componentDidMount() { this.props.parent.appendBlah('append to div in parent?'); }, render: function render() { var pokeys = this.props.pokeys.map(function (p) { return '<h2>' + p + '</h2>'; }).join(''); return React.createElement( 'div', { 'class': 'pokey' }, { pokeys: pokeys } ); } }); React.render(React.createElement(Hello, { name: 'World' }), document.getElementById('container')); </script> </body> </html>

Sorry for the JSX conversion, but it was easier for me to check without setting up grunt :).

In any case, what I'm doing is using the state property. When you call setState, render () is called again. Then I use the details to transfer data to the subcomponent.

+2
source

Here is the version of your JSFiddle with the minimal changes I could make: JSFiddle

The agmcleod tip is right - avoid jquery. I would add, avoid jQuery thinking, and it took me a while to figure it out. In React, the render method should display what you want to see, depending on the state of the component. Do not manipulate the DOM after the fact, manipulate the state. When you change the state, the component will be re-displayed and you will see the change.

Set the initial state (we have not added anything).

 getInitialState: function () { return { appended: false }; },

Change the state (we want to add)

 componentDidMount: function () { this.setState({ appended: true }); // ... }

Now the rendering function may display additional text or not be based on state:

 render: function () { if (this.state.appended) { appendedH2 = <h2>Appended to Blah</h2>; } else { appendedH2 = ""; } return ( <div class='blah'>Hi, why isn't the h2 being appended here? {appendedH2} <SubComponent appended={true}/> </div> ) }
+2
source

Source: https://habr.com/ru/post/988744/

More articles:


All Articles