Lo so window non esiste in Node.js, ma sto usando React e lo stesso codice su client e server. Qualsiasi metodo che uso per controllare se esiste window reti di me:Errore `window not defined` in Node.js
Uncaught ReferenceError: window is not defined
Come posso ottenere intorno al fatto che non posso fare window && window.scroll(0, 0)?
Sawtaytoes ce l'ha. Correvo qualsiasi codice che avete in componentDidMount() e lo circondano con:
if (typeof(window) !== 'undefined') {
// code here
}
Se l'oggetto finestra non è ancora stato creato per il momento Reagire rende il componente, si può sempre eseguire il codice una frazione di il secondo dopo il rendering del componente (e l'oggetto finestra è stato definitivamente creato da allora) quindi l'utente non può dire la differenza.
if (typeof(window) !== 'undefined') {
var timer = setTimeout(function() {
// code here
}, 200);
}
Vorrei sconsigliare di inserire lo stato nel setTimeout.
Ciò accontentarsi che problema per voi:
typeof(window) === 'undefined'
Anche se una variabile non è definita, è possibile utilizzare per controllare typeof() per esso.
Questo tipo di codice non dovrebbe nemmeno essere in esecuzione sul server, dovrebbe essere all'interno di qualche hook componentDidMount (see doc), che viene richiamato solo dal lato client. Questo perché non ha senso scorrere il lato server della finestra.
Tuttavia, se si fa riferimento alla finestra in una parte del codice che esegue sia client sia server, utilizzare invece global (che rappresenta l'ambito globale - ad esempio window sul client).
In un caso, avevo bisogno di fare 'nuova Audio()', e ho bisogno di controllare se 'finestra 'e' window.Audio' esiste. Tristemente, se lo faccio in componentDidMount(), si presenta come non definito nei puntelli del modulo figlio lo inserisco anche se lo faccio 'onClick'. – Sawtaytoes
<Router onUpdate={() => window.scrollTo(0, 0)} history= {browserHistory}>
se è necessario aprire nuova pagina in alto a Reagire JS app, utilizzare questo codice in router.js
L'eliminazione di un pezzo di codice è raramente utile. Per favore aggiungi una spiegazione. – lexicore
Sebbene questo codice possa rispondere alla domanda, fornire un contesto aggiuntivo su come e/o perché risolve il problema migliorerebbe il valore a lungo termine della risposta. – Badacadabra
Questo è un po 'vecchiotto, ma per lo stile ES6 reagire classi di componenti è possibile utilizzare questa classe decoratore Ho creato un drop in solution per la definizione di componenti che dovrebbero essere visualizzati solo dal lato client. Mi piace di più che lasciar cadere i controlli delle finestre ovunque.
import { clientOnly } from 'client-component';
@clientOnly
class ComponentThatAccessesWindowThatIsNotSafeForServerRendering extends Component {
render() {
const currentLocation = window.location;
return (
<div>{currentLocation}</div>
)
};
}
Grazie per il suggerimento! Posizionare la 'window' in' componentDidMount' ha risolto il problema :) – protoEvangelion