Глядя на это реагировать маршрутизатор дом В4 примеру https://reacttraining.com/react-router/web/example/auth-workflow я вижу, что PrivateRoute компонент destructures отдохнуть проп такой
const PrivateRoute = ({ component: Component, ...rest }) => (
<Route {...rest} render={props => (
fakeAuth.isAuthenticated ? (
<Component {...props}/>
) : (
<Redirect to={{
pathname: '/login',
state: { from: props.location }
}}/>
)
)}/>
)
Я хочу быть уверен, что { компонент: компонент ...остальное }
означает:
С пропсами, сделать компонент опору, а затем все другие реквизиты, а переименование реквизита, чтобы "отдохнуть", так что вы можете избежать проблем с именованием реквизит передать в функцию маршруте "отрисовка"
Я прав?
К сожалению, я понял, что мой первый ответ (хотя надеюсь, все еще предоставляя полезную/дополнительного контекста) не'т ответить на ваш вопрос. Позвольте мне попробовать еще раз.
Вы спросите:
Я хочу быть уверен, что
{ компонент: компонент ...остальное }
означает:С пропсами, получить
компонент
опору, а затем все остальные пропсами дано У тебя, и переименование реквизита, чтобы "отдохнуть", так что вы можете избежать проблем именования среквизит
прошел на маршрутрендеринг
функция
Вы'вновь трактовка не совсем правильная. На основе ваших мыслей, хотя, похоже, вы're по крайней мере, осведомлены о том, что происходящее здесь составляет какой-то объект деструктурируется (см. Второй ответ и комментарии есть дополнительные разъяснения).
Чтобы дать точное объяснение, пусть'ы сломать { компонент: компонент ...остальное }
выражения на две отдельные операции:
компонент
свойство, определенное на пропсами (Note: строчные сзвено) и назначить его на новое место в государстве мы называем компонент
(Note: капитал сзвено).реквизит
и собрать их внутри аргумента под названием "отдых".Важным моментом является то, что вы'повторно не переименование реквизита, чтобы "отдохнуть". (И не надо делать с пытаясь "избежать проблем именования с пропсами передать в функцию маршруту отображения в
".)
rest === props;
// => false
Просто стаскивать библиотеки rest_ (следовательно, почему этот аргумент назвали) свойства, определенные на объект реквизит
в новый параметр под названием "отдых".
<Н3>пример использования</Н3>
Здесь'ы пример. Позвольте'ы предположим у нас есть объект myObj
определяются следующим образом:
const myObj = {
name: 'John Doe',
age: 35,
sex: 'M',
dob: new Date(1990, 1, 1)
};
Например, это может помочь, чтобы просто думать о пропсами как имеющие одинаковую структуру (и.е., свойств и значений), как показано в myObj
. Теперь давайте's пишут следующее задание.
const { name: Username, ...rest } = myObj
В заявлении вышеуказанные суммы как * объявление и назначение** двух переменных (или, наверное, константы). Заявление можно рассматривать как:
принять имущество
имя
определенmyObj
и присвоить его значение на новое переменной мы называемимя пользователя
. Затем, возьмите любые другие свойства определеныmyObj
(и.е.,возраст
,секс
иР
) и собрать их в новый объект присваивается переменной мы называем "отдых".
Ведение журналов username
и остальные
в консоли
подтвердите это. Мы имеем следующее:
console.log(Username);
// => John Doe
console.log(rest);
// => { age: 35, sex: 'M', dob: Mon Jan 01 1990 00:00:00 GMT-0800 (PST) }
<Н3>Примечание</Н3> Вы можете удивиться:
Зачем идти через трудности стаскивать
компонент
собственность только переименовать егокомпонент
с заглавной букву "в себе"?
Да, это кажется довольно тривиальным. И, хотя это стандартная практика реагируют, там'почему все Facebook's документация На рамках написано как такового. А именно, использование пользовательских компонентов, предоставляемых с JSX меньше практики, как таковой, чем это необходимо. Реагировать, или, точнее, JSX Регистра. Пользовательские компоненты вставлены без заглавной первой буквы не отображаются на дом. Это просто как реагировать определилось для определения пользовательских компонентов. Таким образом, уже на примере не дополнительно переименован в компонент
имущество, которое было сдернуто из реквизит
до компонент
, в в <компонент {...реквизит} />
выражение не правильно.
Это позволяет вам, чтобы "выкладывать" и реквизит все в одном выражении кратким. Например, пусть'ы считать реквизит
полученные `PrivateRoute компонент выглядит
// `props` Object:
{
thing1: 'Something',
thing2: 'Something else'
}
Если вы хотели, чтобы в дальнейшем передать эти предметы (и.е., thing1 и thing2
) вниз, чтобы вложенные в <компонент />
тег и Вы были'т знаком с объект распространения синтаксис, вы могли бы написать:
<Component
thing1={ props.thing1 }
thing2={ props.thing2 } />
Однако, { ...реквизит }
устраняет синтаксис такой детализации, позволяя spread объекта реквизит
таким же образом можно spread массив значений (e.гр., [...вальс]
). Иными словами, JSX выражение ниже и что выше точности эквивалентны.
<Component { ...props } />
Позволяет сохранить его простым. В JavaScript, если ключ,значение пары, такие же, параметр obj={учетной записи:учетная запись} такой же, как obj={запись}. Поэтому при прохождении реквизит от родителя к дочерним компонентом:
const Input = ({name,label,error, ...rest}) => {
return (
<div className="form-group">
<label htmlFor={name}>{label}</label>
<input
{...rest}
autoFocus
name={name}
id={name}
className="form-control"
aria-describedby="emailHelp"
/>
</div>
);
};
export default Input;
вы будете проходя остальной реквизит как
label={label} placeholder={placeholder} type={type}