Facebook Developer API в reactjs код

Question

У меня есть два файла в моем проекте

• index.html: содержит «приложение-контейнер», где reactjs компоненты крепления
• app.js: файл который имеет реагирующие компоненты

Я хочу использовать кнопку facebook как и поделиться в своем приложении reactjs. Но я хочу, чтобы они появлялись только в определенные моменты времени.

То есть, я хочу отображать их из функции render() функции reactjs, а не постоянно на моей странице html.

я продолжил следующим образом -

1.) я добавил ссылку на facebook яваскрипта SDK на моей странице index.html.

2.) Я добавил код-плагин для кнопки/share в моем методе визуализации.

<div class="fb-share-button" data-href="http://localhost:3000/game" id = "fbshare" data-layout="button_count"></div> 

Но проблема в том, что даже если компоненты правильно установлены, кнопка «Поделиться» не отображается.

Может ли кто-нибудь указать, как я должен действовать?

Answer 1

С class является зарезервированным словом, React использует className. Ниже должно решить вашу проблему

<div className="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div> 

Проблема заключается в том, что она не будет жаловаться, если вы наберете class="", или что-нибудь еще в этом отношении, как xlink:href="" или других неподдерживаемых имен атрибутов. Он просто оставит его, и ваша кнопка доступа не получит его стиля, поэтому, вероятно, он останется невидимым на странице.

Если вы хотите использовать неподдерживаемые имена атрибутов, то dangerouslySetInnerHTML - это путь.

render: function() { 
    var html = '<div class="fb-share-button" data-href="http://localhost:3000/game" id="fbshare" data-layout="button_count"></div>'; 

    return (
    < div dangerouslySetInnerHTML = {{__html: html}} /> 
); 
} 

Если он все еще не работает, это, вероятно, потому, что вы рендеринга кнопку после того, как Facebook завершения разбора страницы. В этом случае вы можете использовать FB.XFBML.parse() в componentDidMount().