M
M
merss2017-02-16 11:52:50
Classmates
merss, 2017-02-16 11:52:50

How to insert a share button from classmates into react?

How to insert this code into react?
If inserted into the header, the button is not rendered.
If pasted into ComponentWillMoun , it says '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>

Answer the question

In order to leave comments, you need to log in

1 answer(s)
V
Vlad Feninets, 2017-04-11
@fnnzzz

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')
)

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question