javascript - 如何正确使用forceUpdate()？

Question

这个问题已经有答案了:

What's the best way to periodically reload an iframe with React? (2 个回答)

已关闭 4 年前。

我正在尝试定期重新加载 iframe，但我正在使用 React，所以我无法直接操作 DOM。看来我最好的选择是使用 forceUpdate() 因为 url 没有改变，所以我不能使用状态更改来更新它(请参阅此处的上一篇文章 What's the best way to periodically reload an iframe with React? )。但是，当我尝试执行 forceUpdate() 时，它不会重新渲染我的组件。关于原因有什么想法吗？

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"/>
    )
}

});

请参阅此处的代码笔:http://codepen.io/anon/pen/ggPGPQ

**我知道 grafana 可以设置为自动更新，我只是用它作为 iframe 的示例。

Answer 1

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')
);