Запутался в синтаксисе React PrivateRoute {} - PullRequest
Новая
       19

Запутался в синтаксисе React PrivateRoute {}

0 голосов
/ 04 апреля 2019

Я новичок в React. Сейчас я работаю над реагирующим маршрутизатором и видел, что многие люди используют компонент PrivateRoute для обработки страниц аутентификации пользователей. Однако я так запутался с синтаксисом и пониманием этой функции. 

export function PrivateRoute({ component: Component, authed, ...rest }) {
 return (
    <Route {...rest}
        render={
            (props) => authed ? <Component {...props} /> : <Redirect to={{ pathname: 'login', state: { from: props.location } }} />
        }
    />
 )
}

И это используется ниже 

< PrivateRoute authed={this.props.isAuthenticated} path="/profile" component={MyProfile} />

Могу ли я знать, почему мы обертываем все параметры внутри {} следующим образом: {component: Component, authed, ... rest}?
и почему мы используем «компонент: компонент», как это? Является ли для компонента разрыва = {MyProfile}? Но почему мы пишем так? что такое (реквизит) и ... реквизит?

... rest is path = "/ profile" и другие аргументы типа 'точные', верно?

Большое спасибо!

Ответы [ 2 ]

3 голосов
/ 04 апреля 2019

Могу ли я знать, почему мы обертываем все параметры внутри {} следующим образом: {component: Component, authed, ... rest}?

Это синтаксис JavaScript, известный как назначение деструктурирования. Это невероятно удобный способ распаковки значений из массивов и объектов.

Представьте, что ваша функция ожидает объект с ключом id. Вы пишете function(myObject) { return myObject.id; }. С деструктурой можно написать function({id}) { return id; }. И ожидайте, что переданный объект будет деструктурирован в запрошенные ключи.

Что такое (реквизит) и ... реквизит?

Во-первых, ... известен как оператор распространения. И еще один удобный способ расширения массива или объекта в местах, где ожидаются аргументы или элементы.

Во-вторых, (props) является частью объявления функции стрелки. Обратите внимание, что за ним следует стрелка: (props) =>. Это то же самое, что написать function(props). Однако между функциями стрелок и ключевым словом function есть некоторые тонкие различия, в основном то, к чему относится ключевое слово this.

Также обратите внимание, что за (props) => следует неявный возврат. Вы можете написать функцию со стрелкой, например, (props) => { return true;}, используя явный возврат. Или неявный возврат без скобок, например: (props) => true.

2 голосов
/ 04 апреля 2019

Могу ли я знать, почему мы обертываем все параметры внутри {} следующим образом {component: Component, authed, ... rest}?

Это синтаксис JavaScript, однакоЧасто это решение разработчика предпочтений или руководства по стилю кодирования для написания компонентов функции React так, как вы описали изначально.Давайте разберем ваш вопрос далее.

component: Component: это сокращение для деструктурирования аргумента функции (component) и присвоения его новому имени переменной (Component).Обратите внимание, что мы делаем это, потому что React требует, чтобы имена компонентов начинались с заглавной буквы.

...rest: это то, как мы можем обрабатывать любое количество дополнительных аргументов, передаваемых этой функции, известных как остальные параметры.Думайте об этом как: «собрать все оставшиеся аргументы функции в значение (rest), которое мы позже сможем использовать в функции. В React это очень распространено для передачи реквизитов по дереву компонентов.

EDIT:

  • reactpatterns.com содержит несколько полезных и кратких примеров.

Ссылки:

...