Понимание кода React

Я изучаю React.js. Я знаком с приведенным ниже кодом

class Login extends Component {
    state = { email: '',};
    render = () => {
        return (//some JSX code);
    }
}

Но я получил код ниже как решение проблемы.

const PrivateRoute = ({ component: Component, ...rest }) => (
    <Route
      {...rest}
        render={props =>
            (Auth.isAuthenticated() ? ( <Component {...props} />) : (<Redirect to={{ pathname: '/',}}/>))
      }
    />
);

Я не мог понять код выше. Может ли кто-нибудь помочь мне понять?

Что здесь {...rest}?

Я знаю оператора спреда. Почему я передаю это здесь ({ component: Component, ...rest }) и здесь <Route {...rest} ? Что он делает в этих двух местах?

Почему render() выглядит так render={props => } ?

Спасибо всем.


reactjs react-router-v4 react-component react-router-component
person abu abu    schedule 10.08.2018    source источник
comment
{...rest} называется синтаксисом расширения. Когда вы пишете render={props => ... }, вы даете функцию реквизиту render. Сначала это может показаться более очевидным, если вы напишете render={(props) => { return ... }}   -  person Tholle    schedule 10.08.2018

Ответы (2)


arrow_upward
1
arrow_downward

{...rest} — это деструктуризация ссылки на объект: https://developer.mozilla.org/it/docs/Web/JavaScript/Reference/Operators/Destructuring_assignment В реакции вы можете написать компонент как расширение класса Component (управляемый компонент) или как расширение PureComponent или Functional Component (неуправляемый компонент). Тот, который вы просите, является функциональным компонентом. Деструктуризация — это функция ES6, а компоненты — функция реакции, и вы можете найти всю информацию и шаблоны в официальном документе реакции.

person Mosè Raguzzini    schedule 10.08.2018
comment
Спасибо @Mose Raguzzini. Я хотел бы узнать больше о функциональном компоненте. Не могли бы вы помочь мне в этом отношении? - person abu abu; 27.08.2018
comment
Итак, приступим: reactjs.org/docs/components-and-props.html . Документация React действительно хорошо сделана :) - person Mosè Raguzzini; 27.08.2018

arrow_upward
0
arrow_downward

Чтобы ответить на ваш первый вопрос - это оператор распространения объекта. со ссылкой на MDN:

Синтаксис расширения позволяет расширять итерацию, такую ​​как выражение массива или строку, в местах, где ожидается ноль или более аргументов (для вызовов функций) или элементов (для литералов массива), или выражение объекта, которое должно быть расширено в местах, где ноль или более ожидаются пары ключ-значение (для литералов объектов).

В вашем случае он делает то, что компонент PrivateRoute передает все реквизиты (кроме component) в качестве реквизита компоненту Route.

Что касается второго вопроса - это в основном шаблон реквизита рендеринга. См. документы для пояснений, так как они довольно длинные. Но в основном происходит то, что компонент Route принимает функцию в качестве своей опоры render, и эта функция отвечает за отображение некоторого контента на основе переданного ему props.

person Honza Kalfus    schedule 10.08.2018