Question

我需要在iframe中显示一个html页面。我使用fetch来获取内容，因为页面具有身份验证。我没有收到任何错误，也没有看到任何内容

someFunc() {
  const myIframe = this.refs.myIframe;     
  fetch('http://example.com/example.html', {
    method: 'GET',
    headers: {
      'Content-Type': 'text/html',
      'Authorization': 'Basic xyz'
    }
  }).then(function(response) {
      return response.text();
  }).then(function(text){
      //assign srcDoc to text
      return <iframe srcDoc={text}></iframe>;
  });
}
render() {
   return (<div>{this.someFunc()}</div>)
}

Answer 1

你为什么不这样做：<iframe src="http://example.com/example.html"></iframe>？

否则它不起作用的原因是在返回函数后执行then。所以你可以做的是创建一个状态子进程并在then函数中设置它并在renderfunction中渲染它：

    var Example = React.createClass({
 componentDidMount: function() {
   var setState = this.setState;
   const myIframe = this.refs.myIframe;     
  fetch('http://example.com/example.html', {
    method: 'GET',
    headers: {
      'Content-Type': 'text/html',
      'Authorization': 'Basic xyz'
    }
  }).then(function(response) {
      return response.text();
  }).then(function(text){
    setState({child: <iframe srcDoc={text}></iframe>});
  });
},
 getInitialState: function() {
   return {child: <div> hello </div>};
 },
render: function() {
   return (<div>{this.state.child}</div>)
}
});

React.render(
  <Example />, 
  document.getElementById('mount-point'));

reactjs iframe没有显示html

1 个答案: