Estoy tratando de recargar periódicamente un iframe pero estoy usando React, así que no puedo manipular el DOM directamente. Parece que mi mejor opción es usar forceUpdate () porque la URL no cambia, por lo que no puedo usar un cambio de estado para actualizarla (consulte la publicación anterior aquí ¿Cuál es la mejor manera de recargar periódicamente un iframe con React? ). Sin embargo, cuando intento hacer forceUpdate(), no vuelve a renderizar mi componente. ¿Alguna idea de por qué?
var Graph = React.createClass({ componentDidMount: function() { setInterval(function(){ this.forceUpdate(); }.bind(this), 5000); }, render() { return ( <iframe src="http://play.grafana.org/dashboard/db/elasticsearch-metrics" width="1900px" height="700px"/> ) }});
Vea el codepen aquí: http://codepen.io/anon/pen/ggPGPQ
** Sé que grafana se puede configurar para que se actualice automáticamente, solo estoy usando esto como un iframe de ejemplo.
class App extends React.Component { state = { name: 'request', phones: ['nokia', 'sonya', 'ericsson'] } Rerender = () => { this.forceUpdate() } render() { const rd= Math.random(); return ( <div> REACT APP { this.state.phones.map(item => <p>{item} {rd}</p>) } <input type="button" value="Click" onClick={this.Rerender}/> </div>) } } ReactDom.render( <App />, document.getElementById('root') );React es inteligente para saber que ese elemento no ha cambiado, por lo que no lo desmonta al volver a renderizar. Hay muchas maneras de eliminar el elemento y volver a agregarlo, pero aquí hay una forma artificial basada en su ejemplo (se procesa dos veces en cada intervalo para eliminar y volver a agregar el iframe):
var Graph = React.createClass({ getInitialState: function() { return {count: 0}; }, componentDidMount: function() { setInterval(function(){ this.setState({count: this.state.count + 1}); this.setState({count: this.state.count + 1}); }.bind(this), 5000); }, render() { return this.state.count % 2 === 0 ? ( <iframe src="http://play.grafana.org/dashboard/db/elasticsearch-metrics" width="1900px" height="700px"/> ) : null; } }); ReactDOM.render(( <div style={{height:'100%'}}> <Graph /> </div> ), document.getElementById('root'));