[JavaScript, ReactJS] react-router: Три метода рендеринга маршрутов (компонентный, рендеринговый и дочерний) (перевод)

Ответить на тему

Автор

Сообщение

news_bot ^®

Стаж: 6 лет 9 месяцев
Сообщений: 27286

news_bot ^® написал(а)
08-Июн-2021 22:34

Цитировать

ВведениеВ прошлом посте я рассказывал об учебнике по настройке react-router. Если вы не читали предыдущий пост, нажмите здесь! Я хочу добавить несколько важных тем о методах рендеринга маршрутов.Методы рендеринга маршрутаСуществует несколько способов рендеринга HTML компонента или тега с помощью <Route>. Я использовал этот способ в своем последнем посте.

В этом сниппете нет ничего плохого, и компонент <Home/> будет рендирован. Однако у вас не будет доступа к трем пропсам маршрута — match, location и history. Я расскажу об этих трех реквизитах в следующем посте. Оставайтесь с нами! Итак, давайте рассмотрим, как мы можем получить доступ к этим реквизитам, если мы используем эти три метода рендеринга маршрута.1. Компонентный метод <Route component/>Первый метод рендеринга очень прост. Нам просто нужно поместить компонент в качестве пропса в Route.

const Home = (props) => {
console.log(props);
return <div>Home</div>;
};

Вот и все. Вы получите эти пропсы.Подождите. Как мы можем передать компоненту еще один проп? Ответ заключается в том, что мы не можем использовать этот метод рендеринга. Однако мы можем использовать render и children2. Рендеринговый метод <Route render/>Используя этот метод рендеринга, у вас будет доступ к использованию встроенной функции, и вы сможете передать другой пропс своему компоненту. При необходимости можно передать пропс маршрута в качестве параметра функции.

<Route
path="/contact"
render={(routeProps) => {
return <Contact name={name} address={address} {...routeProps} />;
}}
/>

С помощью <Route render/> можно также рендировать HTML тег, и для этого не требуется рендировать такой компонент, как <Route component/>.

<Route
path="/contact"
render={() => {
return (
<div>
<h2>Contact</h2>
<p>Name: {name}</p>
<p>Adress: {address}</p>
</div>
);
}}
/>

Я лично предпочитаю использовать этот метод рендеринга.3. Дочерний метод <Route children />По сути, дочерний и рендеринговый методы одинаковы. Оба они получают функцию, но если вы используете дочерний метод, она будет рендирована, когда путь не совпадает. Также следует убедиться, что вы не используете <switch>.

В этом случае, когда пользователи сталкиваются с /, компоненты <Portfolio/> и <Contact/> будут рендированы, поскольку они используют метод рендеринга дочерних элементов. Честно говоря, я не знаю, когда следует использовать этот метод в реальном проекте, но вы можете посмотреть документацию здесь.ЗаключениеЭто три метода рендеринга маршрута, которые вы можете использовать. Сначала я был озадачен, почему существует так много способов для рендеринга маршрута. После того, как я несколько раз прочитал документацию, наступил момент "AHA". Я надеюсь, что это было полезно, и, пожалуйста, оставляйте комментарии для вопросов или отзывов! Счастливого кодирования!

Перевод материала подготовлен в рамках курса "React.js Developer". Если вам интересно узнать о курсе подробнее, регистрируйтесь на день открытых дверей онлайн, на нем преподаватель расскажет о формате и программе обучения.

===========
Источник:
habr.com
===========
===========
Автор оригинала: Raynaldo Sutisna
===========Похожие новости:

Теги для поиска: #_javascript, #_reactjs, #_frontend, #_react.js, #_reactrouter, #_rendering, #_blog_kompanii_otus (
Блог компании OTUS
), #_javascript, #_reactjs

Профиль ЛС

Ответить на тему

Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы

Текущее время: 22-Ноя 12:04
Часовой пояс: UTC + 5