多个 ReactDOM.render() 抛出错误 Target container is not a DOM element

Question

Trying to integrate React into a non-React project, so I need to able to render the react apps at multiple elements.

Here's the index.js:

import React from 'react';
import ReactDOM from 'react-dom';

import Activation from './forms/Activation';
import EditButton from '../components/editButton';

ReactDOM.render(<EditButton></EditButton>, document.getElementById('edit-button'));
ReactDOM.render(<Activation></Activation>, document.getElementById('activate-form'));

I am getting this error :

_registerComponent(...): Target container is not a DOM element.

The first component, EditButton , does render successfully, but the second is unable too. If I move Activation to the top, then Activation will be the only component that renders.

Has anyone run into this issue? Any advice or direction would be greatly appreciated.

EDIT:

Because existing app isn't a SPA, depending on the route that user was on ('/' or '/product', etc.) the DOM element specified didn't exist. Fixed with just an if statement using getElementById, and if true ReactDOM.render().

Thanks!

Answer 1

It is sometimes a good practice to make sure the DOM element exists:

if ( document.getElementById('root') ) {

    ReactDOM.render(<Foo />, document.getElementById('root'));

}

Answer 2

First of all, check if script finds the second element. You can check it with something like this:

console.log(document.getElementById('activate-form'))
console.log(document.getElementById('edit-button'))

Also, check if there is only one element with each id exists on the page. And finally if this elements are not nested.