@japan123

В чем ошибка в компоненте для копирования кода svg иконки в буфер обмена?

Жду что при нажатии на кнопку код иконки скопируется в буфер обмена. Копируется только [object object]
https://codesandbox.io/s/vv63po7zw5
  • Вопрос задан
  • 167 просмотров
Решения вопроса 2
rockon404
@rockon404 Куратор тега React
Frontend Developer
JSX это синтаксический сахар над вызовом React.createElement. Поэтому описаный с помощью JSX svg элемент это лишь вызов React.createElement, который возвращает объект, являющийся так называемым Virtual DOM Node, по нему библиотека строит узел в реальном DOM.

Для решения вашей задачи можно использовать ref.

let iconRef;
const getIconRef = node => iconRef = node;

const IconsList = {
  internet: (
    <svg ref={getIconRef} width="22px" height="16px" viewBox="0 0 22 16" version="1.1">
      /* ... */
    </svg>
  ),
];


copyToClipboard = text => {
    var textField = document.createElement("textarea");
    textField.innerText = iconRef;
    document.body.appendChild(textField);
    textField.select();
    document.execCommand("copy");
    textField.remove();
  };


если иконок много, то рациональней использовать renderToString из пакета react-dom/server
import { renderToString } from 'react-dom/server';

textField.innerText = renderToString(/* иконка описанная JSX */);
Ответ написан
0xD34F
@0xD34F Куратор тега React
Объект-то в строку надо превратить.

Добавляете

import ReactDOMServer from 'react-dom/server';

в начало вашего index.js, затем

textField.innerText = IconsList.internet;

меняете на

textField.innerText = ReactDOMServer.renderToStaticMarkup(IconsList.internet);
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 2
Taraflex
@Taraflex
Ищу работу. Контакты в профиле.
У вас в internet jsx дерево а не строка.
Используйте что-нибудь в стиле https://www.npmjs.com/package/jsx-to-string
Ответ написан
Комментировать
Потому что вы пытаетесь добавить JavaScript объект в textarea. В результате чего, по умолчанию, вызывается функция объекта toString(), которая возвращает указанное вам значение [object object]. Чтобы проверить выведите в консоль.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы