Ответы пользователя по тегу React
  • Как подключить share-кнопки соцсетей в React?

    evilandfox
    @evilandfox
    Javascript, meteor, Qt
    Фишка в том, что для таких иницилизируемых javascript'ом компонентов надо делать инициализацию в componentDidMont через доступ с помощью ref:
    codepen.io/evilandfox/pen/jAxJxv
    <script type="text/javascript" src="http://vk.com/js/api/share.js?93" charset="windows-1251"></script>
    <script>window.twttr = (function(d, s, id) {
      var js, fjs = d.getElementsByTagName(s)[0],
        t = window.twttr || {};
      if (d.getElementById(id)) return t;
      js = d.createElement(s);
      js.id = id;
      js.src = "https://platform.twitter.com/widgets.js";
      fjs.parentNode.insertBefore(js, fjs);
     
      t._e = [];
      t.ready = function(f) {
        t._e.push(f);
      };
      return t;
    }(document, "script", "twitter-wjs"));</script>
    <div id="main"></div>

    var Component = React.createClass({
      componentDidMount: function(){
        this.refs.vk.innerHTML = VK.Share.button(false, {type: "round", text: "Сохранить"});
        twttr.widgets.createShareButton(
          'https://dev.twitter.com/',
          this.refs.tw,
          {
            text: 'Hello World'
          });
      },
      render: function(){
        return (
          <div>
            <h4>Поделиться:</h4>
            <div ref="vk"></div>
            <div ref="tw"></div>
          </div>
        );
      }
    });
    
    ReactDOM.render(<Component/>, document.getElementById("main"));
    Ответ написан
    Комментировать
  • Как бы вы решили эту задачу?

    evilandfox
    @evilandfox
    Javascript, meteor, Qt
    Хоть и вопрос задан давно, отвечу на всякий.
    Надо отделять данные от кода.
    Например, можно в том же массиве statuses хранить у каждого элемента третьим элементом текст перед кнопкой, если данный тип кнопки с текстом. Кстати, лучше сделать массив объектов, а не массив массивов.
    Ну а потом передав параметр btn3 (который будет undefined если нет текста перед кнопкой), в компоненте Bbutton уже делать кнопку с текстом или без.
    В общем вот
    Код jsbin
    Ответ написан
    Комментировать