Question

我正在尝试定期重新加载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"/>
    )
}

}）;

请参阅此处的codepen：http://codepen.io/anon/pen/ggPGPQ

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

Answer 1

React很聪明地知道该元素没有改变，因此在重新渲染时它不能卸载它。你可以通过很多方法删除元素并将其添加回来，但这里有一种基于你的例子构建的设计方法（每个间隔渲染两次以删除并添加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'));

Answer 2

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

如何正确使用forceUpdate（）？

2 个答案: