Задание, которое нужно сделать В этом тренажёре вы потренируетесь использовать HOC для того, чтобы не дублировать одну логику в нескольких компонентах. Перед нам небольшая карточка с тексто

Вопрос пользователя:

Задание, которое нужно сделать В этом тренажёре вы потренируетесь использовать HOC для того, чтобы не дублировать одну логику в нескольких компонентах. Перед нам небольшая карточка с текстом, а под ней две кнопки Поставить лайк и Поделиться. Эти кнопки доступны, если человек авторизовался. В ином случае вместо них отображается сообщение Необходима авторизация. Чтобы авторизоваться, есть кнопка Войти . Таким образом, в коде у нас есть: Компонент LikeButton. Через props он получает статус авторизации isAuth, в зависимости от которого либо отображает кнопку Поставить лайк или сообщение needAuthText. Компонент ShareButton. Его поведение почти полностью идентично LikeButton , за исключением обработчика onClick. Компонент App. Он использует LikeButton и ShareButton , передавая в них статус авторизации и сообщение о ее необходимости. Вам нужно вынести логику проверки авторизации из LikeButton и ShareButton в HOC, для этого необходимо: Создать папку /src/hocs. В этой папке создать файл withAuth.tsx. В этом файле необходимо создать функцию-HOC withAuthButton. В компоненте App нужно с помощью withAuthButton создать два компонента WithAuthShareButton и WithAuthLikeButton. Их нужно использовать вместо ShareButton и LikeButton для отображения кнопок Поделиться и Поставить лайк.

Ответ нейросети:

Пройдите быструю авторизацию для просмотра:

/src/hocs/withAuth.tsx:

import React from 'react';

const withAuthButton = (WrappedComponent: React.ComponentType<{ isAuth: boolean }>) => {
  return ({ isAuth, ...props }: { isAuth: boolean }) => {
    if (isAuth) {
      return <WrappedComponent isAuth={isAuth} {...props} />;
    } else {
      return <p>Необходима авторизация</p>;
    }
  };
};

export default withAuthButton;

App.tsx:

import React from 'react';
import LikeButton from './LikeButton';
import ShareButton from './ShareButton';
import withAuthButton from './hocs/withAuth';

const WithAuthLikeButton = withAuthButton(LikeButton);
const WithAuthShareButton = withAuthButton(ShareButton);

const App = () => {
  const isAuth = true; // Предположим, что пользователь авторизован

  return (
    <div>
      <WithAuthLikeButton isAuth={isAuth} />
      <WithAuthShareButton isAuth={isAuth} />
    </div>
  );
};

export default App;

Напишите нам, если в вопросе есть ваши персональные данные (yasnoponyatno24@yandex.ru)

import React from 'react';

const withAuthButton = (WrappedComponent: React.ComponentType<{ isAuth: boolean }>) => {
  return ({ isAuth, ...props }: { isAuth: boolean }) => {
    if (isAuth) {
      return <WrappedComponent isAuth={isAuth} {...props} />;
    } else {
      return <p>Необходима авторизация</p>;
    }
  };
};

export default withAuthButton;

import React from 'react';
import LikeButton from './LikeButton';
import ShareButton from './ShareButton';
import withAuthButton from './hocs/withAuth';

const WithAuthLikeButton = withAuthButton(LikeButton);
const WithAuthShareButton = withAuthButton(ShareButton);

const App = () => {
  const isAuth = true; // Предположим, что пользователь авторизован

  return (
    <div>
      <WithAuthLikeButton isAuth={isAuth} />
      <WithAuthShareButton isAuth={isAuth} />
    </div>
  );
};

export default App;

ЯсноПонятно24

Пройдите быструю авторизацию для просмотра:

Пройдите быструю авторизацию для просмотра:

Последние вопросы: