задание В этом тренажёре вы потренируетесь использовать 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;

/src/components/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; // assume user is authenticated

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

export default App;

Now, in your App component, you can use WithAuthLikeButton and WithAuthShareButton instead of LikeButton and ShareButton to display the buttons based on the authentication status. The logic for checking authentication is now handled in the withAuthButton HOC.

Напишите нам, если в вопросе есть ваши персональные данные (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; // assume user is authenticated

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

export default App;

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

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

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

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