时间戳

首页 > 解决方案 > 部分未显示在 React App 上或显示应该存在的内容

reactjs - 部分未显示在 React App 上或显示应该存在的内容

问题描述

您好，我正在制作一个 React 应用程序，但在 localhost:3000 的某些部分中没有显示我的内容。我相信这与诸如 CSS/JSS/Images 之类的文件夹在 Public 文件夹中并且没有正确呈现到 SRC 文件夹有关。

甚至当部分代码在 . 但我正在努力寻找其中的原因。

我的课程都更改为“className”，但仍然是同样的问题

import React from 'react';
import './App.css';

class App extends React.Component {
  render() {
    return (
      <div className="App">
        <body data-spy="scroll" data-target=".site-navbar-target" data-offset="300">


        <nav className="navbar navbar-expand-lg navbar-dark ftco_navbar bg-dark ftco-navbar-light site-navbar-target" id="ftco-navbar">
          <div className="container">
            <a className="navbar-brand" href="index.html">Digi<span>Lab</span></a>
            <button className="navbar-toggler js-fh5co-nav-toggle fh5co-nav-toggle" type="button" data-toggle="collapse" data-target="#ftco-nav" aria-controls="ftco-nav" aria-expanded="false" aria-label="Toggle navigation">
              <span className="oi oi-menu"></span> Menu
            </button>

            <div className="collapse navbar-collapse" id="ftco-nav">
              <ul className="navbar-nav nav ml-auto">
                <li className="nav-item"><a href="#home-section" className="nav-link"><span>Home</span></a></li>
                <li className="nav-item"><a href="#services-section" className="nav-link"><span>Services</span></a></li>
                <li className="nav-item"><a href="#projects-section" className="nav-link"><span>Projects</span></a></li>
                <li className="nav-item"><a href="#about-section" className="nav-link"><span>About</span></a></li>
                <li className="nav-item"><a href="#testimony-section" className="nav-link"><span>Testimony</span></a></li>
                <li className="nav-item"><a href="#blog-section" className="nav-link"><span>Blog</span></a></li>
                <li className="nav-item"><a href="#contact-section" className="nav-link"><span>Contact</span></a></li>
              </ul>
            </div>
          </div>
        </nav>
        <section id="home-section" className="hero">
          <h3 className="vr">Welcome to DigiLab</h3>
          <div className="home-slider js-fullheight owl-carousel">
            <div className="slider-item js-fullheight">
              <div className="overlay"></div>
              <div className="container-fluid p-0">
                <div className="row d-md-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
                  <div className="one-third order-md-last img js-fullheight" containerStyle="background-image:url(./bg_1.jpg);">
                    <div className="overlay"></div>
                  </div>
                  <div className="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
                    <div className="text">
                      <span className="subheading">Welcome to the digilab</span>
                      <h1 className="mb-4 mt-3">Small Details Make A Big <span>Impression</span></h1>
                      <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country.</p>

                      <p><a href="# " className="btn btn-primary px-5 py-3 mt-3">Get in touch</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>

            <div className="slider-item js-fullheight">
              <div className="overlay"></div>
              <div className="container-fluid p-0">
                <div className="row d-flex no-gutters slider-text js-fullheight align-items-center justify-content-end" data-scrollax-parent="true">
                  <div className="one-third order-md-last img js-fullheight" containerStyle="background-image:url(images/bg_2.jpg);">
                    <div className="overlay"></div>
                  </div>
                  <div className="one-forth d-flex js-fullheight align-items-center ftco-animate" data-scrollax=" properties: { translateY: '70%' }">
                    <div className="text">
                      <span className="subheading">Welcome to the digilab</span>
                      <h1 className="mb-4 mt-3"><span>Strategic</span> Design And <span>Technology</span> Agency</h1>
                      <p>A small river named Duden flows by their place and supplies it with the necessary regelialia. It is a paradisematic country.</p>

                      <p><a href="# " className="btn btn-primary px-5 py-3 mt-3">Get in touch</a></p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </section>
    )
  }
}

这就是我要实现的目标： 在此处输入图像描述

这就是我得到的回报： 在此处输入图像描述

标签： reactjs

解决方案

推荐阅读