Динамический рендеринг компонентов в React
год назад·1 мин. на чтение
В этой статье рассмотрим, как динамически добавлять или удалять компоненты в react.
Во-первых, нам нужно создать два новых компонента, чтобы мы могли использовать их для динамического рендеринга.
// userA.js import React from "react"; function UserA() { return ( <div> <h1>This is user A</h1> </div> ); } export default UserA;
// userB.js import React from "react"; function UserA() { return ( <div> <h1>This is user B</h1> </div> ); } export default UserB;
Создание динамического компонента
Теперь нам нужно создать динамический компонент, который поможет нам динамически визуализировать другие компоненты на основе пропсов.В приведенном выше коде мы сначала импортировали два компонента (// Dynamic.js import React from "react"; import UserA from "./userA"; import UserB from "./userB"; const components = { usera: UserA, userb: UserB }; function DynamicComponent(props) { const SelectUser = components[props.user]; return <SelectUser />; } export default DynamicComponent;
UserA
, UserB
), а затем добавили их в объект components
.
Внутри DynamicComponent
мы создали переменную SelectUser
и вернули ее. Таким образом, если мы передадим usera
в качестве пропса, то отрендерится компонент UserA
. Если мы передадим userb
в качестве пропса, отрендерится компонент UserB
.
Использование динамического компонента
Давайте теперь воспользуемся нашим динамическим компонентом, импортировав его.// App.js import React, { useState } from "react"; import DynamicComponent from "./Dynamic"; function App() { const [user, changeUser] = useState("usera"); return ( <div> {/* изначально отрендерится компонент UserA */} <DynamicComponent user={user} /> <button onClick={() => changeUser("usera")}>Switch user-a</button> <button onClick={() => changeUser("userb")}>Switch user-b</button> </div> ); } export default App;
Как использовать фрагменты React
год назад·1 мин. на чтение
В этой статье рассмотрим использование фрагментов в приложениях React.
Что такое React Fragment?
React Fragment - это компонент React, который помогает нам возвращать несколько дочерних элементов без использования дополнительных DOM узлов. Если мы хотим вернуть группу элементов, то нужно обернуть их в общий тег. React компонент должен возвращать только один элемент, иначе будет ошибка. Следующий пример не будет работать, т.к. компонент возвращает несколько элементов -h1
и p
.
Фрагменты React представлены в версии 16. Давайте посмотрим на несколько примеров.import React from 'react'; function Welcome(props){ return ( <h1>Welcome to reactgo.com</h1> <p>Some dummy content</p> ) }
Без фрагментов React
Теперь мы заменяем код компонента приветствия с помощью фрагментов.import React from 'react'; function Welcome(props){ return ( <div> <h1>Welcome to reactgo.com</h1> <p>Some dummy content</p> </div> ) }
С помощью React Fragments
Используя фрагменты, мы перестали создавать дополнительный элементimport React,{Fragment} from 'react'; function Welcome(props){ return ( <Fragment> <h1>Welcome to reactgo.com</h1> <p>Some dummy content</p> </Fragment> ) }
div
в компоненте Welcome
.
Короткий синтаксис фрагментов
Существует также краткий синтаксис для фрагментов.Этот синтаксис использует пустые теги для объявления фрагментов react.import React from 'react'; function Welcome(props){ return ( <> <h1>Welcome to reactgo.com</h1> <p>Some dummy content</p> </> ) }
Еще несколько примеров
Использование фрагментов при возврате группы дочерних компонентов.function Button(){ return <button>Click</button> } function Name(){ return <h1>Hi react</h1> } function Post(){ return ( <div> <h1>Heading...</h1> <p>post content</p> </div> ) } function App(){ return ( <> <Post/> <Name/> <Button/> </> ) }