Можно ли вставить виджет на страницу сайта в React?

Question

[RinaDeiswen]

Умные люди, подскажите. Не могу разобраться как вставить ссылку на виджет в React, да и можно ли вообще такое провернуть.
Ссылка имеет примерно такой вид (извиняюсь, за подобное оформление, просто нет уверенности, что это за язык):

<script src="https://static.elfsight.com/platform/platform.js" data-use-service-core defer></script>
<div class="elfsight-app-хххххххх-хххх-хххх-хххх-хххххххххххх"></div>

Answer 1

[Nikcet]

Создайте новый компонент без JSX, как это делать, засуньте в него свой код, и подключайте компонент в приложении.

Answer 2

[nowm]

У Elfsight есть справка на этут тему.

1. Установите react-elfsight-widget

npm install react-elfsight-widget

2. Используйте такой код:

import React from 'react';
import { ElfsightWidget } from 'react-elfsight-widget';

function Component() {
  return <ElfsightWidget widgetID="хххххххх-хххх-хххх-хххх-хххххххххххх" />;
}

Соответственно, вместо хххххххх-хххх-хххх-хххх-хххххххххххх подставьте идентификатор вашего виджета.

Comments

[RinaDeiswen]

Не работает. Выдает ошибку Module build failed (from ./node_modules/babel-loader/lib/index.js):
SyntaxError: C:\Users\1\Desktop\teacher\src\Pages\Blog.js: Identifier 'Component' has already been declared. (4:9)

[nowm]

RinaDeiswen, я когда писал ответ, старался помочь с подлючением виджета в ReactJS. Судя по ошибке, которую вы показываете, у вас очень мало опыта в работе с React, и с этим я помочь не могу, простите — учиться придётся самостоятельно.

Я показал, как использовать компонент «ElfsightWidget». Для демонстрации в примере понадобилось создать функциональный компонент «Component», внутри которого используется виджет. Это не значит, что в вашем коде нужно обязательно создавать функцию «Component» — он в моём коде только для примера, и ошибка у вас выскакивает из-за того, что у вас в файле Blog.js уже есть функция Component. Вот, что нужно использовать:

<ElfsightWidget widgetID="хххххххх-хххх-хххх-хххх-хххххххххххх" />

Вставляйте его там, где нужно подключить виждет. Весь остальной код в моём примере — это демонстрация, как его использовать.