Не понимаю, как передавать реквизиты маршрутам

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

<Route path="/" render={()=><testPage num="2" someProp={100}/>}/>

В приведенном ниже примере он выдает мне ошибки, потому что "переключатель" не определен?

const MyProductPage = (props) => {
      return (
        <ProductPage 
          toggle={this.toggle.bind(this)}
          {...props}
        />
      );
    }

Вот еще один:

<Route path="/path" render={(props) => <Component {...props} Props={} />} />

Что в данном случае означает {... props}? Куда мне поместить свой компонент? Пожалуйста, объясните, я действительно хочу понять, спасибо! :)


reactjs react-router react-router-v4
person Mr.Banks    schedule 17.07.2017    source источник

Ответы (1)


arrow_upward
1
arrow_downward

Что ж, для вашего компонента MyProductPage использование this здесь неверно. MyProductPage - это функциональный компонент, а не компонент класса.

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

Итак, приведенный ниже код не должен передавать ошибку ... однако, не зная больше о вашем коде, я не уверен, где вам нужно привязать метод toggle.

const MyProductPage = (props) => {
      return (
        <ProductPage 
          {...props}
          toggle={props.toggle}

        />
      );
    }

Дополнительное примечание: я также почти уверен, что {...props} нужно указать первым. См. Ниже.

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

Что касается вашего второго вопроса, {...props} - это пример оператора спреда. Дружественное к React определение можно найти здесь.

Чтобы немного изменить пример:

  var exampleObject= {};
  exampleObject.foo = x;
  exampleObject.bar = y;
  var component = <Component {...exampleObject} />;

... оператор распространения просто говорит: возьмите все методы из exampleObject и передайте их как свойства. Это еще один способ сказать:

 <Component foo={exampleObject.foo} bar={exampleObject.bar} />

Это берет все в exampleObject и передает его вниз.

Представьте, что у вас есть 20 свойств, которые вы хотите передать дочернему компоненту. Это может очень быстро стать многословным, поэтому оператор распространения - это всего лишь немного синтаксического сахара, так что вам не нужно все это записывать.

РЕДАКТИРОВАТЬ: Чтобы связать это с вашими примерами:

Изображение, если родительский компонент передает реквизиты следующим образом:

<MyProductPage {...exampleObject} />
// Includes .foo and .bar

Затем, если вам не нужно изменять какие-либо сохраненные значения, дочерний компонент может просто выглядеть так

const MyProductPage = (props) => {
      return (
        <ProductPage {...props} />
      );
    }
// still contains .foo and .bar

Но, если вам ДЕЙСТВИТЕЛЬНО нужно изменить одно из свойств, вы просто передаете его отдельно (что-то вроде «переопределения»):

const MyProductPage = (props) => {
      return (
        <ProductPage 
           {...props}
           foo={props.foo + 1}
        />
      );
    }
// still contains .foo and .bar, but foo will be different.

{...props} сначала передает все вниз, затем ваш явный вызов foo отменяет то, что передается, и дает ему новое значение.

person Denny S. Temple    schedule 17.07.2017
comment
Добавлено второе изменение: я почти уверен, что {... props} должен быть указан первым, иначе он перезапишет ваши изменения, если вы попытаетесь изменить одно из его значений. - person Denny S. Temple; 17.07.2017