@merss

Как вставить кнопку Поделиться(share button) из одноклассников в реакт?

Как вставить данный код в реакт?
Если вставлять в heder то кнопка не отрисовывается.
Если вставлять в ComponentWillMoun , то пишет, 'OK is not define'.
https://apiok.ru/ext/like

<div id="ok_shareWidget"></div>
<script>
!function (d, id, did, st, title, description, image) {<code lang="javascript">
  var js = d.createElement("script");
  js.src = "https://connect.ok.ru/connect.js";
  js.onload = js.onreadystatechange = function () {
  if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
    if (!this.executed) {
      this.executed = true;
      setTimeout(function () {
        OK.CONNECT.insertShareWidget(id,did,st, title, description, image);
      }, 0);
    }
  }};
  d.documentElement.appendChild(js);
}(document,"ok_shareWidget","https://todayme.ru",'{"sz":30,"st":"oval","ck":1}',"","","");
</script>
</code>
  • Вопрос задан
  • 548 просмотров
Пригласить эксперта
Ответы на вопрос 1
fnnzzz
@fnnzzz
front-end dev
import React, { Component } from 'react'
import { render } from 'react-dom'

class OkButton extends Component {
	componentWillMount() {

		const scriptOk = document.createElement('script')
		
		scriptOk.innerHTML = `
			!function (d, id, did, st, title, description, image) {	
			  var js = d.createElement("script");
			  js.src = "https://connect.ok.ru/connect.js";
			  js.onload = js.onreadystatechange = function () {
			  if (!this.readyState || this.readyState == "loaded" || this.readyState == "complete") {
			    if (!this.executed) {
			      this.executed = true;
			      setTimeout(function () {
			        OK.CONNECT.insertShareWidget(id,did,st, title, description, image);
			      }, 0);
			    }
			  }};
			  d.documentElement.appendChild(js);
			}(document,"ok_shareWidget","https://todayme.ru",'{"sz":30,"st":"oval","ck":1}',"","","");
		`

		document.head.append(scriptOk)
	}

	render() {
		return <div id="ok_shareWidget"></div>
	}
}

class App extends Component {
	render() {
		return <div>
			OK example
			<OkButton></OkButton>	
		</div>
	}
}

render(
	<App />,
	document.querySelector('#mount_place')
)
Ответ написан
Комментировать
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
28 апр. 2024, в 20:09
9000 руб./за проект
28 апр. 2024, в 19:54
2000 руб./за проект
28 апр. 2024, в 19:54
5000 руб./за проект