Динамический рендеринг компонентов в 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;

Что такое условный рендеринг?

Условный рендеринг (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.

Тернарный оператор

Мы можем сделать код компонента приложения короче с помощью тернарного оператора.

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} />

Здесь мы обернули наш код фигурными скобками, потому что в JSX нам нужно использовать фигурные скобки для выражений JavaScript.

Логический оператор && (и)

В 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.