Реагируйте JS refre sh страницу каждый раз, нажимая на пункт меню, используя маршрут - PullRequest
Новая
       57

Реагируйте JS refre sh страницу каждый раз, нажимая на пункт меню, используя маршрут

0 голосов
/ 29 января 2020

Я новичок в React JS, и в настоящее время я создаю простое приложение. Я использую Route для навигации между компонентами, и все работает нормально, но если я нахожусь на странице и снова щелкаю в меню, чтобы перейти к странице, она не обновляет sh ее содержимое.

Я просто хочу, чтобы компонент обновлял sh его содержимое каждый раз, когда я нажимаю на меню элементов.

Это мой класс боковой панели: 

 class Sidebar extends Component {
constructor(props) {
    super(props);
}
render() {
    return (
        <Router>
            <Route render={({ location, history }) => (
                <React.Fragment>
                    <SideNav
                        onSelect={(selected) => {
                            const to = '/' + selected;
                            if (location.pathname !== to) {
                                history.push(to);
                            }
                        }}>
                        <SideNav.Toggle />
                        <SideNav.Nav>
                                <NavItem eventKey="Cars">
                                    <NavIcon>
                                        Cars
                                    </NavIcon>
                                </NavItem>
                                 <NavItem eventKey="Bicycles">
                                    <NavIcon>
                                        Bicycles
                                    </NavIcon>
                                </NavItem>
                        </SideNav.Nav>
                    </SideNav>
                    <main>
                        <Switch>
                            <Route exact path="/" component={props => <Home />} />
                            <Route
                                exact path="/Cars"
                                render={() => !isAllowed ?
                                    <Home /> :
                                    <Cars/>
                                } />
                            <Route
                                exact path="/Bicycles"
                                render={() => !isAllowed ?
                                    <Home /> :
                                    <Bicycles />
                                } />
                        </Switch>
                    </main>
                </React.Fragment>
            )}
            />
        </Router>
    )
}

}

Это мой Класс Компонентов Автомобилей: 

import React, { Component } from 'react';

class Cars extends Component {
    render() {
        return (
            <div style={{ textAlign: 'center', marginLeft: '295px' }} >
                <form>
                    <h1>Hello</h1>
                    <p>Enter your car name:</p>
                    <input
                        type="text"
                    />
                </form>
            </div>
        )
    }
}
export default Cars;

Например. если я что-то напишу на входе и после этого нажму на меню пункта, я хочу, чтобы этот ввод был обновлен.

1 Ответ

1 голос
/ 29 января 2020

Чтобы «обновить» sh (или в мире React, называемом Re-render) содержимое компонента, вам нужно изменить его состояние, и именно так работает React. Как я вижу, у вас нет какого-либо состояния в вашем компоненте, поэтому, если вы можете указать, что вы хотите «refre sh», мы можем вам помочь.

Сердцем каждого компонента React является его «состояние» объект, который определяет, как этот компонент отображает и ведет себя. Другими словами, «состояние» - это то, что позволяет создавать динамические компоненты c и интерактивные.

Быстрый пример из целого числа rnet: 

 import React from 'react';

  class Person extends React.Component{
    constructor(props) {
      super(props);
      this.state = {
        age:0
      this.incrementAge = this.incrementAge.bind(this)
    }

    incrementAge(){
      this.setState({
        age:this.state.age + 1;
      });
    }

    render(){
      return(
        <div>
          <label>My age is: {this.state.age}</label>
          <button onClick={this.incrementAge}>Grow me older !!<button>
        </div>
      );
    }
  }

  export default Person;

возраст внутренней части метки перерисовывается (или «refre sh») каждый раз, когда пользователь нажимает на нее, так как ее состояние меняется.

Вот официальная документация, и я бы порекомендовал вам прочитайте его, он прояснит многие проблемы, с которыми вы столкнулись.

https://reactjs.org/docs/state-and-lifecycle.html

...