Как создать QR-код по строке и направить его пользователю на скачивание?

Для создания QR-кода в React и направления пользователя на его скачивание можно воспользоваться сторонней библиотекой, например 'qrcode.react'. Давайте разобьем задачу на две части - создание QR-кода по строке и его предоставление пользователю для скачивания.

1. Создание QR-кода по строке:
Для начала установим библиотеку 'qrcode.react' с помощью npm:

npm install qrcode.react

Затем создадим компонент React, который будет генерировать QR-код по заданной строке. Пример кода компонента может выглядеть следующим образом:

import React from 'react';
import QRCode from 'qrcode.react';

const QRCodeGenerator = ({ value }) => {
  return <QRCode value={value} />;
};

export default QRCodeGenerator;

2. Направление пользователя на скачивание QR-кода:
Чтобы пользователь мог скачать сгенерированный QR-код, можно организовать его сохранение как изображения. Для этого можно использовать библиотеку 'react-to-image'.

Установим 'react-to-image' с помощью npm:

npm install react-to-image

Изменим компонент, в котором отображается QR-код, чтобы добавить кнопку для скачивания:

import React from 'react';
import QRCode from 'qrcode.react';
import ReactToImage from 'react-to-image';

const QRCodeWithDownload = ({ value }) => {
  return (
    <div>
      <ReactToImage
        style={{ display: 'none' }}
        src={value}
        download={value}
      />
      <QRCode value={value} />
      <button onClick={() => document.getElementById('qr-download').click()}>Скачать QR-код</button>
    </div>
  );
};

export default QRCodeWithDownload;

Таким образом, используя 'qrcode.react' для создания QR-кода и 'react-to-image' для предоставления возможности пользователю скачать QR-код, вы сможете реализовать необходимый функционал в вашем React-приложении.