Π― ΠΏΡΡΠ°ΡΡΡ ΡΠ²ΡΠ·Π°ΡΡΡΡ Ρ iframe Ρ ΠΏΠΎΠΌΠΎΡΡΡ API postMessage, Π½ΠΎ Ρ ΠΌΠ΅Π½Ρ ΠΏΡΠΎΠ±Π»Π΅ΠΌΠ° Ρ ΡΠΏΡΠ°Π²Π»Π΅Π½ΠΈΠ΅ΠΌ eventListeners Π² ES6
Π Π΄ΠΎΠΊΡΠΌΠ΅Π½ΡΠ°ΡΠΈΠΈ ΡΠΊΠ°Π·Π°Π½ΠΎ, ΡΡΠΎ
Π React ΠΊΠ°ΠΆΠ΄ΡΠΉ ΠΌΠ΅ΡΠΎΠ΄ Π°Π²ΡΠΎΠΌΠ°ΡΠΈΡΠ΅ΡΠΊΠΈ ΠΏΡΠΈΠ²ΡΠ·ΡΠ²Π°Π΅ΡΡΡ ΠΊ ΡΠΊΠ·Π΅ΠΌΠΏΠ»ΡΡΡ Π΅Π³ΠΎ ΠΊΠΎΠΌΠΏΠΎΠ½Π΅Π½ΡΠ° (ΠΊΡΠΎΠΌΠ΅ ΡΠ»ΡΡΠ°Π΅Π² ΠΈΡΠΏΠΎΠ»ΡΠ·ΠΎΠ²Π°Π½ΠΈΡ ΡΠΈΠ½ΡΠ°ΠΊΡΠΈΡΠ° ΠΊΠ»Π°ΡΡΠ° ES6)
ΠΡΠΎΠ±Π»Π΅ΠΌΠ° Π² ΡΠΎΠΌ, ΡΡΠΎ this.handler.bind(this) !== this.handler
ΠΏΠΎΡΡΠΎΠΌΡ, ΠΊΠΎΠ³Π΄Π° Ρ Π·Π°ΠΊΠΎΠ½ΡΡ Ρ ΡΠΎΠ±ΡΡΠΈΠ΅ΠΌ, Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΡΠ΄Π°Π»ΠΈΡΡ ΡΠ»ΡΡΠ°ΡΠ΅Π»Ρ, ΠΏΠΎΡΠΎΠΌΡ ΡΡΠΎ Ρ Π½Π΅ ΠΌΠΎΠ³Ρ ΡΠΎΡ
ΡΠ°Π½ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ. Π― ΠΌΠΎΠ³ Π±Ρ ΠΏΠΎΠΏΡΡΠ°ΡΡΡΡ ΠΈΠ½ΠΊΠ°ΠΏΡΡΠ»ΠΈΡΠΎΠ²Π°ΡΡ ΡΡΠ½ΠΊΡΠΈΡ, Π½ΠΎ Π΄Π»Ρ ΠΈΠ½ΠΊΠ°ΠΏΡΡΠ»ΠΈΡΡΡΡΠ΅ΠΉ ΡΡΠ½ΠΊΡΠΈΠΈ ΡΠ°ΠΊΠΆΠ΅ ΠΏΠΎΡΡΠ΅Π±ΡΠ΅ΡΡΡ ΠΏΡΠΈΠ²ΡΠ·ΠΊΠ°. Π― ΠΌΠΎΠ³ Π±Ρ ΠΏΠΎΠΏΡΠΎΠ±ΠΎΠ²Π°ΡΡ ΡΡΠΏΠ΅ΡΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡ, Π½ΠΎ Ρ Π½Π΅ ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ ΡΡΠΎ Ρ
ΠΎΡΠΎΡΠ°Ρ ΠΈΠ΄Π΅Ρ, ΠΏΠ»ΡΡ Ρ Π½Π΅ Π·Π½Π°Ρ, ΠΊΠ°ΠΊΠΈΠ΅ Π°ΡΠ³ΡΠΌΠ΅Π½ΡΡ Π΅ΠΌΡ Π½ΡΠΆΠ½Ρ. Π― ΡΠΎΠ²Π΅ΡΡΠ΅Π½Π½ΠΎ ΡΠ²Π΅ΡΠ΅Π½, ΡΡΠΎ ΡΠΏΡΡΠΊΠ°Ρ Π²Π°ΠΆΠ½ΡΠΉ ΠΌΠΎΠΌΠ΅Π½Ρ.
ΠΡΠ±Π°Ρ ΠΏΠΎΠΌΠΎΡΡ ΠΏΡΠΈΠ²Π΅ΡΡΡΠ²ΡΠ΅ΡΡΡ !
export default class SomeComponent extends Component {
handleIframeData(event) {
// some stuff in there that will need 'this' to be set to the component's context, to get props for example.
}
componentDidMount() {
window.addEventListener('message', this.handleIframeData.bind(this), false)
}
componentWillUnmount() {
// won't work because 'this.handleIframeData.bind(this) !== this.handleIframeData'
window.removeEventListener('message', this.handleIframeData, false)
}
render() {
return (
<div className="SomeComponent" style={{height: '100%', width:'100%', display: 'table'}}>
<iframe src="assets/iframe/index.html" style={{display: 'table-row', width: '100%', height:'100%', border: 0}}></iframe>
</div>
)
}
}
Π‘ΠΏΠ°ΡΠΈΠ±ΠΎ, Π² Π»ΡΠ±ΠΎΠΌ ΡΠ»ΡΡΠ°Π΅ !
Π‘ΠΈΡΡΠ΅ΠΌΠ° ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ Π² React, Π° Π½Π΅ Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Stack Overflow ΠΈΠ»ΠΈ IRC.
ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΠ±ΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ - ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ Π² ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅:
constructor(props) {
super(props);
this.handleIframeData = this.handleIframeData.bind(this);
}
Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Π² Π±Π»ΠΎΠ³Π΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΊΠ»Π°ΡΡΡ: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding .
@fkling ΠΡΠΎ ΠΈΠΌΠ΅Π½Π½ΠΎ ΡΠΎ, ΡΡΠΎ Ρ ΡΠΎΠ±ΠΈΡΠ°Π»ΡΡ ΡΠΊΠ°Π·Π°ΡΡ: P. ΠΠ΅ΡΠ½ΠΎ ΠΏΠΎ Π²ΡΠ΅ΠΌ ΠΏΡΠ½ΠΊΡΠ°ΠΌ. ΠΠ»Π°Π³ΠΎΠ΄Π°ΡΡ!
ΠΠ·Π²ΠΈΠ½ΠΈΡΠ΅ Π·Π° ΡΡΠΎ, Π΅ΡΠ΅ ΡΠ°Π· ΡΠΏΠ°ΡΠΈΠ±ΠΎ!
Π‘Π°ΠΌΡΠΉ ΠΏΠΎΠ»Π΅Π·Π½ΡΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½ΡΠ°ΡΠΈΠΉ
Π‘ΠΈΡΡΠ΅ΠΌΠ° ΠΎΡΡΠ»Π΅ΠΆΠΈΠ²Π°Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ ΠΏΡΠ΅Π΄Π½Π°Π·Π½Π°ΡΠ΅Π½Π° Π΄Π»Ρ ΠΎΠ±Π½Π°ΡΡΠΆΠ΅Π½ΠΈΡ ΠΎΡΠΈΠ±ΠΎΠΊ Π² React, Π° Π½Π΅ Π΄Π»Ρ ΠΎΠ±ΡΠ΅ΠΉ ΠΏΠΎΠ΄Π΄Π΅ΡΠΆΠΊΠΈ. ΠΠ»Ρ ΡΡΠΎΠ³ΠΎ ΠΈΡΠΏΠΎΠ»ΡΠ·ΡΠΉΡΠ΅ Stack Overflow ΠΈΠ»ΠΈ IRC.
ΠΡΠΈ ΡΡΠΎΠΌ ΠΎΠ±ΡΠ΅Π΅ ΡΠ΅ΡΠ΅Π½ΠΈΠ΅ ΡΡΠΎΠΉ ΠΏΡΠΎΠ±Π»Π΅ΠΌΡ - ΡΠΎΡ ΡΠ°Π½ΠΈΡΡ ΡΡΡΠ»ΠΊΡ Π½Π° ΠΏΡΠΈΠ²ΡΠ·Π°Π½Π½ΡΠΉ ΠΎΠ±ΡΠ°Π±ΠΎΡΡΠΈΠΊ. ΠΠ°ΠΏΡΠΈΠΌΠ΅Ρ, Π²Ρ ΠΌΠΎΠΆΠ΅ΡΠ΅ ΠΏΡΠΈΠ²ΡΠ·Π°ΡΡ ΠΌΠ΅ΡΠΎΠ΄ Π² ΠΊΠΎΠ½ΡΡΡΡΠΊΡΠΎΡΠ΅:
Π‘ΠΌ. Π’Π°ΠΊΠΆΠ΅ ΡΠΎΠΎΠ±ΡΠ΅Π½ΠΈΠ΅ Π² Π±Π»ΠΎΠ³Π΅, Π² ΠΊΠΎΡΠΎΡΠΎΠΌ ΠΏΡΠ΅Π΄ΡΡΠ°Π²Π»Π΅Π½Ρ ΠΊΠ»Π°ΡΡΡ: https://facebook.github.io/react/blog/2015/01/27/react-v0.13.0-beta-1.html#autobinding .