Почему не отображается Facebook Group plugin в React?

Question

[aarifkhamdi]

Подскажите, пожалуйста, почему не отображается группа в следующем примере? Если убрать if, то все правильно отрисовывается.

Добавить после body:

<div id="fb-root"></div>
    <script crossorigin="anonymous" src="https://connect.facebook.net/en_US/sdk.js#xfbml=1&version=v3.3&appId=2406343689634903&autoLogAppEvents=1"></script>

App.js:

class App extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            loading: false
        }
    }
    componentDidMount = () => {
        setTimeout(() => this.setState(prevState => ({...prevState, loading: true})), 5000);
    };
    render = () => {
        let main = <div>test</div>;

        if (this.state.loading) {
            main = (
                <div className="fb-group" data-href="https://www.facebook.com/groups/ayearofrunning/" data-width="280"
                     data-show-social-context="true" data-show-metadata="false" />
            );
        }
        return main
    }
}

Answer 1

[Антон Спирин]

Вы добавляете контент после инициализации скрипта sdk. Естественно у вас ничего не работает.
Изучайте sdk, у них должен быть способ доступа к глобальному объекту и метод для повторного парсинга страницы. Если это можно сделать только через хук инициализации, то придется диспатчить кастомные события.

На github есть обертка react-facebook. Возможно, она вам подойдет.

Comments

[aarifkhamdi]

спасибо большое что навели на проблему. долго пришлось гуглить, но разобрался. вроде