反应组件未显示

Question

I am working on incorporating a react front end with my flask website and am having trouble getting the react component to show up. 我正在与我的烧瓶网站合并一个React前端，但无法使React组件显示出来。 I am able to use webpack to build and load in my modules without issue, but perhaps don't fully understand how to get the react side running. 我能够使用webpack毫无问题地构建和加载模块，但也许不完全了解如何使React运行。

Here is the html that holds the div (note, I use flask to simply extend my layout html): 这是保存div的html（注意，我使用flask来简单地扩展布局html）：

{% extends 'layout.html' %}
{% block content %}

<body id = "aboutPage" data-spy="scroll" data-target = ".navbar" data-offset="60">
  <div id = "date-root"> </div>

</body>
{% endblock content %}

The layout html: 布局html：

<!DOCTYPE html>
<html style="padding:0px;" >
<head >
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=yes">
    <meta name="robots" content="noindex,follow" />
    <!-- React required tags, change to production later -->
    <script src="https://unpkg.com/react@16/umd/react.development.js" crossorigin></script>
    <script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js" crossorigin></script>

    <!-- Lodash for webpack -->
    <script src="https://unpkg.com/lodash@4.16.6"></script>

    <!-- Bootstrap CSS and JQuery -->

    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-2.2.4.js" charset="utf-8"></script>
    <link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='style.css') }}">
    {% if title %}
        <title>{{ title }}</title>
    {% else %}
        <title>Sneak Em</title>
    {% endif %}
</head>
<body background = "{{ url_for('static', filename = 'shoes-dark-green.jpg') }}">
    <header class="site-header">
      <nav class="navbar navbar-expand-md navbar-dark bg-steel navbar-fixed-top" style="background-color: #000000; border-radius:0; margin-bottom:0; border:0; position:fixed; top: 0; width: 100%; z-index:999;">
        <div class="container">
          <a class="navbar-brand mr-4" href="{{ url_for('shop') }}">Sneak Em</a>
          <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarToggle" aria-controls="navbarToggle" aria-expanded="false" aria-label="Toggle navigation">
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarToggle">
            <div class="navbar-nav mr-auto">
              <a class="nav-item nav-link" href="{{ url_for('home') }}">Home</a>
              <a class="nav-item nav-link" href="{{ url_for('calendar') }}">Schedule</a>
            </div>
            <!-- Navbar Right Side -->
            <div class="navbar-nav right" style = "text-align: center;">
              {% if not current_user.is_authenticated %}
                <a class="nav-item nav-link" href="{{ url_for('login') }}">Login</a>
                <a class="nav-item nav-link" href="{{ url_for('register') }}">Register</a>
              {% else %}
                <a class="nav-item nav-link" href="{{ url_for('profile') }}">
                {% if current_user.first_name is not none %}
                  {{current_user.first_name}}
                {% else %}
                  Profile
                {% endif %}
                </a>
                <a class="nav-item nav-link" href="{{ url_for('logout') }}">Logout</a>
              {% endif %}
            </div>
          </div>
        </div>
      </nav>
    </header>
    {% with messages = get_flashed_messages(with_categories=true) %}
    {% if messages %}
    <main role="main" class="container" style = "width: 100%; height:auto; z-index:-999; margin-top:0px;">
      <div class="row" style = "width: 100%;">
        <div class="col-md-8" style = "width: 100%; flex: none; max-width: none;">
              {% for category, message in messages %}
                <div class="alert alert-{{ category }}">
                  {{ message }}
                </div>
              {% endfor %}
        </div>
      </div>
    </main>
    {% endif %}
    {% endwith %}
    {% block content %}{% endblock %}
    <!-- Optional JavaScript -->
    <!-- jQuery first, then Popper.js, then Bootstrap JS -->
    <script src="https://code.jquery.com/jquery-3.2.1.slim.min.js" integrity="sha384-KJ3o2DKtIkvYIK3UENzmM7KCkRr/rE9/Qpg6aAZGJwFDMVNA/GpGFF93hXpG5KkN" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRSQQxSfFWpi1MquVdAyjUar5+76PVCmYl" crossorigin="anonymous"></script>
</body>
</html>

Here is my entry point js file, index.js: 这是我的入口点js文件index.js：

import React from 'react';
import ReactDOM from 'react-dom';
import MyDayPicker from './daypicker';

ReactDOM.render(
  <MyDayPicker />,
  document.getElementById("date-root")
);

const element = <h1>Schedule</h1>;
console.log(element);

Lastly, here is the daypicker.js file which holds the react component and its code: 最后，这是daypicker.js文件，其中包含react组件及其代码：

import React from 'react';
import DayPicker from 'react-day-picker';
import 'react-day-picker/lib/style.css';

export default class MyDayPicker extends React.Component {
  constructor(props) {
    super(props);
    this.handleDayClick = this.handleDayClick.bind(this);
    this.state = {
      selectedDay: null,
    };
  }
  handleDayClick(day, { selected }) {
    this.setState({
      selectedDay: selected ? undefined : day,
    });
  }
  render() {
    return (
      <div>
        <DayPicker
          selectedDays={this.state.selectedDay}
          onDayClick={this.handleDayClick}
        />
        <p>
          {this.state.selectedDay
            ? this.state.selectedDay.toLocaleDateString()
            : 'Please select a day'}
        </p>
      </div>
    );
  }
}

Please help me figure out what I am missing! 请帮助我找出我所缺少的！ Thanks guys. 多谢你们。

Answer 1

I'm not using flask so maybe I'm wrong... but it seems to me that you missed react script in *.html file. 我没有使用flask，所以也许我错了...但是在我看来，您错过了* .html文件中的react脚本。 Please add: 请加：

<script src="<path to your react script - index.js" ></script>

Answer 2

您可以通过开始查看是否已加载本机反应组件（例如路由器）来诊断问题，如果问题没有消失，如果没有消失，请检查检查控制台以查看错误。

反应组件未显示

问题描述

2 个解决方案

解决方案1
0 2018-12-31 12:48:00

解决方案2
0 2018-12-31 14:21:19

反应组件未显示

问题描述

2 个解决方案

解决方案1 0 2018-12-31 12:48:00

解决方案2 0 2018-12-31 14:21:19

解决方案1
0 2018-12-31 12:48:00

解决方案2
0 2018-12-31 14:21:19