Реагировать: преобразовать компонент в строку HTML и CSS
Я работал над генератором пользовательского интерфейса карты в React, и как только пользователь закончил настройку его с помощью пользовательского интерфейса, я хочу иметь возможность преобразовать карту (это компонент React) и экспортировать HTML и CSS за ним. Есть ли способ превратить компонент в HTML-строку?
Я хочу, чтобы пользователь нажал кнопку, которая возьмет компонент, который они редактировали в браузере, а затем получит для него весь HTML и CSS.
Какие изменения внесет пользователь?
Важно то, что это css? было бы проще использовать встроенные стили, чем это было бы в случае element.outerHTML
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 3
С помощью инструмента тестирования можно преобразовать компонент в строку. Может быть, это подходит для вашего варианта использования? https://github.com/airbnb/enzyme
Если вы используете create-react-app, вы можете создать готовую к производству сборку с помощью npm запустить сборку. Это создаст для вас HTML и CSS.
Если вы хотите визуализировать определенные компоненты, вы можете изучить рендеринг на стороне сервера.
Возможно, я сформулировал вопрос неправильно, я имел в виду, что я хочу, чтобы он экспортировал только один компонент в виде HTML и CSS, чтобы люди могли скопировать и вставить код в свои проекты. Подумайте о генераторе кнопок CSS, но для карточек :)
А, я понимаю, ну, может быть, рендеринг на стороне сервера может вам помочь. Обновил свой ответ. Вы можете отобразить их на сервере, например, в iframe, а затем получить исходный код.
Скопировать из браузера?