Question

我正在将反应前端与我的烧瓶网站合并，但无法使反应组件显示出来。我能够使用webpack毫无问题地构建和加载模块，但也许不完全了解如何使React运行。

这是保存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 %}

布局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>

这是我的入口点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);

最后，这是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>
    );
  }
}

请帮助我找出我所缺少的！谢谢大家。

Answer 1

我不使用烧瓶，所以也许我错了...但是在我看来，您错过了* .html文件中的react脚本。请添加：

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

Answer 2

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

反应组件未显示

2 个答案: