Динамический рендеринг компонентов в React
2 года назад·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
2 года назад·2 мин. на чтение
В этой статье рассмотрим, как рендерить компоненты по условию в React.
Что такое условный рендеринг?
Условный рендеринг (conditional rendering) означает отображение элементов в пользовательском интерфейсе только в том случае, если выполняется определенное условие, в противном случае элементы скроются.Условные выражения if
/else
Давайте рассмотрим условные выражения if
/else
в JavaScript.
В приведенном выше коде мы инициализировали переменную значениемlet num = 2 if (num === 2) { console.log('the given number is 2') } else { console.log('the give number is not 2') }
2
, а затем использовали условие if
/else
для логирования сообщения на основе предоставленного числа.
Давайте реализуем условие if
/else
в ReactJs.
В компонентfunction App(props) { if (props.num === 2) { return <p>The given number is 2</p> } else { return <p>The given number is not 2</p> } } <App num={2} />
App
мы передали 2
в проп num
.
Тернарный оператор
Мы можем сделать код компонента приложения короче с помощью тернарного оператора.Здесь мы обернули наш код фигурными скобками, потому что в JSX нам нужно использовать фигурные скобки для выражений JavaScript.function App(props){ return ( {props.num === 2 ? <p>The given number is 2</p> : <p>The given number is not 2</p> } ) } <App num={2} />
Логический оператор &&
(и)
В JavaScript логический оператор &&
используется для вычисления выражения, если данное условие истинно.
Использование логического оператора “и” (true && expression // => expression false && expression // => false
&&
) в React.
В компонентеfunction Search(props) { return ( <div> <h1>Search</h1> <button>Search</button> {props.searchResults > 0 && <ul>search results</ul>} </div> ) }
Search
мы использовали оператор &&
для рендеринга элемента ul
только в том случае, если props.results
больше 0
.