Компоненты неправильно отображаются в React, они отображаются в браузере - PullRequest
Новая
       5

Компоненты неправильно отображаются в React, они отображаются в браузере

0 голосов
/ 12 января 2019

Я настроил App.js, который связывает мои компоненты с их страницами. Все работало нормально Страницы изменились при нажатии. Мне также нужно было изменить заголовок для разных страниц, поэтому я создал новый файл маршрута, такой как App.js, но затем для моего заголовка, названный Headers.js. Этот файл содержит все возможные заголовки, которые я могу иметь на всех своих страницах. Я также связал этот файл в моем index.js. Дело в том, что теперь все мои заголовки меняются по клику, как и предполагалось, но теперь мой фактический контент, само приложение, не меняется. Он изменяется, когда используется обновление, что не должно происходить. Я хочу, чтобы при нажатии ссылки все менялось, а не только заголовок. В моем файле index.html указаны <div class="header"> и <div class="root">.

Заголовок действительно меняется, как предполагается Содержимое для App.js не изменяется, оно изменяется при обновлении страницы. 

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import Headers from './components/Header/Headers';
import App from './components/App/App';
import * as serviceWorker from './serviceWorker';

ReactDOM.render(<Headers />, document.getElementById('header'));
ReactDOM.render(<App />, document.getElementById('root'));

// If you want your app to work offline and load faster, you can change
// unregister() to register() below. Note this comes with some pitfalls.
// Learn more about service workers: bitlyshortenedURL i had to delete in stackoverflow cus of errors
serviceWorker.unregister();

App.js

//dependencies
import React, { Component } from 'react';
import { BrowserRouter as Router, Route } from 'react-router-dom';

//components
import Footer from '../Footer/Footer';
import Home from '../Pages/Home';
import StudentOverview from '../Pages/StudentOverview';
import StudentsPerClass from '../Pages/StudentsPerClass';
import StudentsPerSubject from '../Pages/StudentsPerSubject';
import StudentDetails from '../Pages/StudentDetails';
import Management from '../Pages/Management';
import StudentAdd from '../Pages/StudentAdd';
import Exercise from '../Exercise/Exercise';
import NameWithFaceMC from '../Exercise/NameWithFaceMC';
import NameWithFace from '../Exercise/NameWithFace';
import FaceWithName from '../Exercise/FaceWithName';

//includes
import '../../public/css/kdg-fonts.css';
import '../../public/css/normalize.css';
import '../../public/css/responsive.css';
import '../../public/css/say-my-name.css';
import '../../public/css/style.css';
import '../../public/css/style.min.css';
import '../../public/js/main.js';

//Run
class App extends Component {
  render() {
    return (
      <Router>
        <div className="App">
          <Route exact path='/' component={Home} />
          <Route exact path='/studenten' component={StudentOverview} />
          <Route exact path='/studentenperklasgroep' component={StudentsPerClass} />
          <Route exact path='/studentenpervak' component={StudentsPerSubject} />
          <Route exact path='/studenten/detail/:id' component={StudentDetails} />
          <Route exact path='/beheer' component={Management} />
          <Route exact path='/beheer/add' component={StudentAdd} />
          <Route exact path='/oefenen' component={Exercise} />
          <Route exact path='/oefenen/nbgmc' component={NameWithFaceMC} />
          <Route exact path='/oefenen/nbg' component={NameWithFace} />
          <Route exact path='/oefenen/gbn' component={FaceWithName} />
          <Route path='*' component={Footer} />
        </div>
      </Router>
    );
  }
}

export default App;

package.json

{
  "name": "saymyname",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-router-dom": "^4.3.1",
    "react-scripts": "^2.1.3"
  },
  "scripts": {
    "dev": "webpack --mode development",
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": "react-app"
  },
  "browserslist": [
    ">0.2%",
    "not dead",
    "not ie <= 11",
    "not op_mini all"
  ],
  "devDependencies": {
    "gulp": "^4.0.0",
    "gulp-changed": "^3.2.0",
    "gulp-clean-css": "^4.0.0",
    "gulp-rename": "^1.4.0",
    "gulp-sass": "^4.0.2",
    "gulp-uglify": "^3.0.1"
  }
}

Добавлено видео о том, что я получаю в браузере: https://i.gyazo.com/99daa742967947c1e779917bd18a1182.mp4 Как я уже сказал, на странице показано содержимое, которое должно отображаться при обновлении в браузере.

Если вам понадобится больше кода, снимков экрана или видео, сообщите мне, и я предоставлю. Заранее спасибо

1 Ответ

0 голосов
/ 12 января 2019

Я думаю, что проблема заключается в подходе: то, что вы только что сделали в index.js, - это создание двух разных приложений React, что является неправильным.

У вас должна быть только одна точка входа для приложения (App.js в #root div) и поместить логику для изменения заголовка внутри него.

Есть много способов добиться того, что вы пытаетесь сделать, но в основном это зависит от того, насколько ваши заголовки отличаются друг от друга.

Если, например, что изменяет текст или ссылки, вы создадите общий компонент Header, импортируете его на свои страницы и передадите ему текст, или массив ссылок или любые другие вещи, которые могут вам понадобиться в качестве реквизита ,

...