Модал не будет отображаться, но приложение не отображает никаких ошибок - PullRequest
Новая
       23

Модал не будет отображаться, но приложение не отображает никаких ошибок

0 голосов
/ 21 апреля 2020

Я сейчас изучаю React и пытаюсь создать простой модал, который будет отображаться при загрузке страницы. Когда я сохранил изменения, страница стала белой, и в консоли нет ошибок. Я установил состояние в true и затем попытался вызвать его в рендере, думая, что это может быть способом сделать это. Может кто-нибудь сказать мне, что я делаю не так?

Модальный. js

import React from 'react';


class Modal extends React.Component{
    constructor(props){
        super(props)
        this.state = {open:true}
    }
    render(){
        return (
            <div open={this.state.open}>
                <p>Hello</p>
            </div>
        )
    }
}

export default Modal;

Как я импортировал его в свое приложение. js file 

import React from 'react';
import HomePage from './components/HomePage'
import DadJokesApi from './components/DadJokesApi'
import SportsJokesApi from './components/SportsJokesApi'
import ProgrammingJokesApi from './components/ProgrammingJokesApi';
import { Route, Switch} from "react-router-dom";
import Modal from './components/Modal';

function App() {
  return (
      <main>
        <Modal />
        <Switch>
          <Route path="/DadJokes" component={DadJokesApi} />
          <Route path="/SportsJokes" component={SportsJokesApi} />
          <Route path="/ProgrammingJokes" component={ProgrammingJokesApi} />
          <Route path="/" component={HomePage} />
        </Switch>
      </main>

  );
}

export default App;

1 Ответ

0 голосов
/ 21 апреля 2020

Попытайтесь исправить несколько ошибок в вашем коде:

  • вам не хватает, оберните Routes с Router
  • div имеет open проп, который не требуется

Я взял ваш код и заставил его работать по принципу c. Go и оставьте комментарий для дальнейших сомнений, и я отредактирую свой ответ.

https://codesandbox.io/s/fragrant-frost-1hj6r?file= / src / App. js

Также, в вашем случае попытайтесь сохранить состояние с именем open в родительском элементе (например, App.js) и передать его компоненту Modal. В вашем приложении. js вы можете выбрать и включить или выключить состояние open в зависимости от условий загрузки.

...