0

I am using Django and React.

I want to display this html file:

{% load staticfiles %}

<html>
  <head>
    <meta charset="utf-8">

    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>

    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"
     integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS"
      crossorigin="anonymous">
    </script>

    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
     rel="stylesheet" integrity="sha384-1q8mTJOASx8j1Au+a5WDVnPi2lkFfwwEAa8hDDdjZlpLegxhjVME1fgjWPGmkzs7"
      crossorigin="anonymous">

    <link href="{%static "css/rankingStyle.css"%}" rel="stylesheet" type="text/css"/>

    <link rel="stylesheet" type="text/css" href="//fonts.googleapis.com/css?family=Raleway" />

    <title>Some title</title>
  </head>
  <body>
    <div id="app" />
    <script src="{%static "public/bundle.js"%}" type="text/javascript"></script>
  </body>
</html>

This file references a js file: <script src="{%static "public/bundle.js"%}" type="text/javascript">.

The js file has been obtained from this React file:

import React from 'react';
import {render} from 'react-dom';
import Criteria from './Criteria.jsx';
import { Button } from 'react-bootstrap';

var App = React.createClass({


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

  toggleShowRest: function() {
    this.setState({showRest: !this.state.showRest});
  },

  render: function() {
    return (
        <div className="container">

          <div className="text-center">
            <h1> Title</h1>

            <button onClick={this.toggleShowRest} type="button" className="btn btn-primary btn-circle btn-xl">Go</button>
          </div>

          {this.state.showRest
          ?
          <Criteria />
          :
          null}
        </div>
    );
  }
});


React.render(<App url="/api/comments"/>, document.getElementById('app'));

In the browser, I am getting this error:

 bundle.js:593 Uncaught Invariant Violation: _registerComponent(...): Target container is not a DOM element.

The area before line 593 has this content:

var DOMChildrenOperations = {

  dangerouslyReplaceNodeWithMarkup: Danger.dangerouslyReplaceNodeWithMarkup,

So far, I looked here: Invariant Violation: _registerComponent(...): Target container is not a DOM element and tried all the answers.

They didn't work however. I think the issue is caused by something Django specific.

Community
  • 1
  • 1
bsky
  • 19,326
  • 49
  • 155
  • 270
  • Please post the line with `ReactDOM.render()` method call. BTW a `div` is not a self-closing element, you should use `
    `. This may contribute to the problem.     – pawel Apr 11 '16 at 11:15
  • There is no `ReactDOM.render()` method call. I am using `React.render()`. – bsky Apr 11 '16 at 11:29
  • That's the same thing, depending on React version. Are you going to share? Have you tried closing the div? – pawel Apr 11 '16 at 12:20
  • Yes, I tried closing it but I get the same issue. I already shared the code with `React.render()`. – bsky Apr 11 '16 at 13:17

1 Answers1

-1

you should import build js after the dome node div id is app

eg:

enter image description here

Michael Benjamin
  • 346,931
  • 104
  • 581
  • 701
yichengjie
  • 1