В /home/:id у меня есть <LogButtons/>, когда он нажимается, logOn() вызывается, поэтому logsignPopUp переменная становится <logForm/> компонентом.
На той же странице у меня есть <IframeYoutubeComponent/>, я хочу предотвратить его повторную визуализацию, когда <logForm/> появляется на экране, поэтому видео не перезагружается.
home.js:
export default class Home extends Component {
constructor(props) {
super(props);
this.state = { logsign: "" };
this.logOn = this.logOn.bind(this);
this.signOn = this.signOn.bind(this);
}
logOn() {
this.setState({ logsign: "log" });
}
render() {
let logsignPopUp = this.props.logsign === "log" ? <LogForm/> : this.state.logsign;
let homePage =
<div>
{logsignPopUp}
<div>
<LogButtons logOn = {this.logOn}/>
</div>
<div>
<IframeYoutubeComponent paramsId = {this.props.match.params.paramsId}/>
</div>
</div>;
return (
<div>
<Route exact path = "/home/:id" component = {() => <div>{homePage}</div> } />
</div>
);
}
}
iframeYoutubeComponent.js:
export class IframYoutubeComponent extends Component {
render() {
//this.props.youtube come from Redux state
let src = this.props.youtube.find(el => el.youtubeId === this.props.paramsId);
return (
<iframe src = {"https://www.youtube.com/embed/" + src}></iframe>
);
}
}
Я пытался вернуть false в shouldComponentUpdate(), но он даже не вызывается:
shouldComponentUpdate() {
console.info("test");
return false;
}
Я пытался использовать PureComponent для <IframeYoutubeComponent/>, но видео все еще перезагружается, когда появляется <logForm/>.
Я пытался добавить ключ к своим компонентам, а также пытался вставить this.state.logsign в Redux, но ничего не вышло.
Я начал реагировать с 2 месяцев, поэтому я могу пропустить что-то очевидное, но я не могу понять, что... Есть идеи?





Это потому, что вы передаете функцию стрелки в реквизите component в Route. Таким образом, каждый раз, когда вы создаете новую функцию.
Вы должны передать компонент реакции в этом свойстве или, по крайней мере, функцию, которая возвращает JSX, но эта функция должна быть определена один раз. Например, как метод класса.
Что-то типа:
<div>
<Route exact path = "/home/:id" component = {this.renderHomePage} />
</div>
Но тогда, конечно, вам придется реорганизовать свою логику в отношении этой logsign опоры.
Я создал компонент homePage вместо моей переменной homePage, и видео в компоненте Iframe не перезагружается, это прекрасно! Мне даже не нужен shouldComponentUpdate() или что-то в этом роде. Большое спасибо, вы спасли мой день :)