Итак, у меня есть универсальный проект React, который я настраиваю. Существует мода входа, которая находится на самом высоком уровне приложения, потому что она должна быть открыта на любой странице.Повторное изменение innerHTML снова и снова, заставляя скрипты загружаться много раз
Внутри этого Вход модального У меня есть некоторые вещи, в том числе FacebookLogin, GoogleLogin и некоторые FontAwesome иконки:
<Row>
<Col>
<FacebookLogin
appId='123456789'
autoLoad
callback={this.handleFacebookLogin}
fields='name,email,birthday'
textButton='Login with Facebook'
icon='fa-facebook-square'
/>
</Col>
</Row>
<Row>
<Col>
<GoogleLogin
callback={this.handleGoogleLogin}
clientId='123456789'
>
<FontAwesome name='google'/> Login with Google
</GoogleLogin>
</Col>
</Row>
На начальной странице загрузки, API-интерфейс Facebook, Google API, и FontAwesome является не нагруженных , Когда я открываю модальный первый раз и монтирует компонент (предположительно), загружаются три сценария. Ладно, хорошо.
Но, если я закрываю модальный и снова открываю его, загружаются сценарии . На вкладке сети, «Инициатор» из этих тегов сценария записывается в DOM является setInnerHTML.js:30, что этот бит React исходного кода:
var setInnerHTML = function (node, html) {
node.innerHTML = html;
};
Что здесь происходит? Проект основан на this boilerplate, и я изменился очень мало, поэтому я понятия не имею, почему такое плохое поведение происходит.
Я не могу найти компоненты '* Login' в этом шаблоне, поэтому я предполагаю, что вы внедрили их самостоятельно? Если да, можете ли вы показать один из них? Вы должны знать, что модальный, вероятно, будет отображать своих детей каждый раз, когда он будет показан, поэтому, если эти дети загружают внешние скрипты (на 'componentDidMount' или что-то еще), это также произойдет каждый раз, когда отображается модальный. – robertklep