Есть карточка с текстом, под ней две кнопки Поставить лайк и Поделиться. Эти кнопки доступны, если человек авторизовался. В ином случае вместо них отображается сообщение Необходима авторизац

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

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

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

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

/src/hocs/withAuth.tsx:

import React from 'react';

const withAuthButton = (WrappedComponent: React.ComponentType<any>) => {
  return (props: any) => {
    const isAuth = true; // Проверка авторизации

    if (isAuth) {
      return <WrappedComponent {...props} />;
    } else {
      return <button onClick={() => alert('Необходима авторизация')}>Войти</button>;
    }
  };
};

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 = () => {
  return (
    <div>
      <WithAuthLikeButton />
      <WithAuthShareButton />
    </div>
  );
};

export default App;

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

import React from 'react';

const withAuthButton = (WrappedComponent: React.ComponentType<any>) => {
  return (props: any) => {
    const isAuth = true; // Проверка авторизации

    if (isAuth) {
      return <WrappedComponent {...props} />;
    } else {
      return <button onClick={() => alert('Необходима авторизация')}>Войти</button>;
    }
  };
};

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 = () => {
  return (
    <div>
      <WithAuthLikeButton />
      <WithAuthShareButton />
    </div>
  );
};

export default App;

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

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

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

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