Как вы гарантируете, что каждый раз, когда вы нажимаете ссылку React Router, он обеспечивает рендеринг компонента в определенном состоянии c (через родителя)? - PullRequest
Новая
       127

Как вы гарантируете, что каждый раз, когда вы нажимаете ссылку React Router, он обеспечивает рендеринг компонента в определенном состоянии c (через родителя)?

0 голосов
/ 30 мая 2020

В React. js, мне было интересно, есть ли простой способ изменить состояние дочерних компонентов из родительского ? Я объясню контекст и причины, по которым я спрашиваю об этом ниже.

My React. js веб-приложение имеет панель навигации, которая работает довольно хорошо. Однако я заметил небольшую ошибку, и это меня расстраивало.

Я загрузил приложение с помощью Create-React-App, поэтому App. js - это мой root, и все пути маршрута указаны в app (которые используются на панели навигации). Код приложения js приведен ниже (все компоненты были импортированы): 

class App extends Component {
  render() {
    return (
      <BrowserRouter>
        <div className="App">
          <Navbar />
          <Switch>
            <Route exact path = '/' component = {AboutThis} />
            <Route path = '/contact' component = {ContactMe} />
            <Route path = '/app' component = {HowYouFeel} />
          </Switch>
        </div>
      </BrowserRouter>
    );
  }
}

Это отлично работает с точки зрения перехода по соответствующим ссылкам. Однако компоненты ContactMe и HowYouFeel используют условную визуализацию (где в зависимости от состояния каждого из этих компонентов отображается определенный другой компонент). Например, когда я хочу показать «счастье», состояние HowYouFeel похоже на «счастливый», и в результате оно отображается как «Happy. js».

Дело в том, что я заметил, что даже если «HowYouFeel» начинается с состояния «нейтральный» (и впоследствии отображается «Нейтральный. js»), если я нажимаю кнопку на странице, чтобы установить состояние «Счастливый», то даже если я нажимаю «HowYouFeel» на панели навигации после этого, он остается в этом состоянии, и не восстанавливается до «нейтрального», как я хочу, чтобы . Чтобы восстановить состояние, мне нужно либо обновить sh, перейти к другой ссылке и go вернуться, либо нажать кнопку «Повторить попытку», которую я добавил на страницу в состоянии «Счастливо». Хотя я доволен вышеупомянутым, я хочу, чтобы состояние возвращалось к «нейтральному» каждый раз, когда я нажимаю ссылку на панели навигации .

Ниже приведен мой код панели навигации, если это необходимо: 

const Navbar = () => {
    return (
        <nav className="nav-wrapper blue">
            <div className="container">
                <Link to="/" className ="brand-logo">How are you?</Link>
                <ul className="right">
                    <li><NavLink to="/">About</NavLink></li>
                    <li><NavLink to='/app'>How was your day?</NavLink></li>
                    <li><NavLink to='/contact'>Contact</NavLink></li>
                </ul>
            </div>
        </nav>
    )
}

Итак, есть ли у меня способ гарантировать, что каждый раз, когда нажимаются эти ссылки (в том числе в панели навигации), компоненты восстанавливаются в исходное состояние ? Например, через передачу props компонентам через любой из этих двух вышеупомянутых?

Пожалуйста, не стесняйтесь задавать любые вопросы для уточнения.

Заранее благодарим!

...