Как правильно написать оболочку для компонента React? - PullRequest
Новая
       14

Как правильно написать оболочку для компонента React?

0 голосов
/ 12 июня 2019

Теперь, когда большая часть вашей навигации установлена, вы должны сделать так, чтобы различные домашние животные отображались в PetList.Для этого измените маршрут / в компоненте App, чтобы вместо указания свойства component было указано свойство render.Это свойство может быть назначено функции обратного вызова, которая принимает набор реквизитов и возвращает элемент <PetList> с этими реквизитами , а также исходный pet реквизит.

Подсказка: Попробуйте объявить эту функцию как локальную переменную внутри функции App render(), а затем передать это значение функции в качестве реквизита.Это может помочь с удобочитаемостью.

Как только это сработает, вы сможете увидеть список карточек питомцев при посещении маршрута /.

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

  • Где я могу разместить эту локальную переменную?Он помещается перед оператором return в функции render правильной?
  • Однако по ссылке выше показано, как это сделать;Я не знаю, как применить это к ситуации
  • Я действительно не понимаю, ... и ...rest, что является целью ... в одиночку, а также с ...rest? 
render() {
  return (
    <div>
      <header className="jumbotron jumbotron-fluid py-4">
        <div className="container">
          <h1><Link to='/'>Adopt a Pet</Link></h1>
        </div>
      </header>

      <main className="container">
        <div className="row">
          <div className="col-3">
            <AboutNav />
          </div>
          <div className="col-9">
            <Switch>
              <Route exact path='/' render={() => 
                <PetList pets={this.state.pets} />
              } />
              <Route exact path='/about' component={AboutPage} />
              <Route exact path='/resources' component={ResourcesPage} />
              <Redirect to='/' />
            </Switch>
          </div>
        </div>
      </main>

      <footer className="container">
        <small>Images from <a href="http://www.seattlehumane.org/adoption/dogs">Seattle Humane Society</a></small>
      </footer>
    </div>
  );
}

1 Ответ

0 голосов
/ 12 июня 2019

Где я могу разместить эту локальную переменную? Он помещается перед оператором return в функции рендеринга правильно?

Да. У вас есть это: 

render() {
  return (
    // ...
    <Route exact path='/' render={() => 
      <PetList pets={this.state.pets} />
    } />
    // ...
  );
}

Текст говорит вам сделать что-то вроде этого: 

render() {
  const renderPetList = () => <PetList pets={this.state.pets} />;

  return (
    // ...
    <Route exact path='/' render={renderPetList} />
    // ...
  );
}

Я на самом деле не понимаю ... и ...rest, какова цель ... в одиночку, а также с ...rest?

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

Это надуманный пример, но Предположим, что вы хотите создать оболочку для <button>, которая использует набор реквизитов, которые вы передадите прямо к <button>, и тот, который вы не будете (скажем, "mySize"), потому что вы хотите сделать что-то еще с этим первым. Вы можете сделать это так: 

const MyButton = ({ mySize, childen, disabled, tabIndex, onClick, children }) => {
  const className = mySize === 'big' ? 'big-button' : 'normal-button';

  return (
    <button className={className} disabled={disabled} tabIndex={tabIndex} onClick={onClick}>
      {children}
    </button>
  );
};

Хотя это действительно многословно. Вместо того, чтобы повторять имена всех реквизитов, которые мы хотим передать <button>, мы можем использовать ... («оператор распространения»), чтобы выбрать определенные реквизиты для вставки переменных, как мы это сделаем, в то время как rest (эрго ...rest, хотя вы можете называть его как хотите), добавьте объект, сделав его гораздо более кратким: 

const MyButton = ({ mySize, ...restProps }) => {
  const className = mySize === 'big' ? 'big-button' : 'normal-button';

  return (
    <button className={className} {...restProps}>
      {children}
    </button>
  );
};
...