请教, 基于React的Tab组件内含iFrame的方案?

#1

需求是实现一个管理工作台. 最重要的内容会以Tab方式来展示.

又因为要兼容旧的代码, Tab的内容可以是html代码段, 同时还要求是iFrame 嵌入 url 的.

我写了一了简单的测试发现, 每次切换 Tab时, iFrame都会重新加载导致iFrame嵌入的页面的重新刷新. 这样没法满足要求啊?

求教实现思路!

class TabContainerComponent extends React.Component {
constructor(props) {
  super(props);
}
render() {
return (
  <Tabs onSelect={this.handleSelect} selectedIndex={2}>
    <TabList>
      <Tab>Foo</Tab>
      <Tab>Bar</Tab>
      <Tab>Baz</Tab>
    </TabList>
    <TabPanel>
      <iframe src="http://baidu.com"></iframe>
    </TabPanel>
    <TabPanel>
      <iframe src="http://sina.com"></iframe>
    </TabPanel>
    <TabPanel>
      <iframe src="http://sohu.com"></iframe>
    </TabPanel>
  </Tabs>
  );
}
}
#2

楼主解决问题了吗 我现在也遇到了 求解啊

#3

442153598@qq.com

#4

TabPanel 这个组件在tab切换时，是销毁组件还是隐藏组件？？

#5

同问。。。

#6

把 iframe 包在一个组建里，设 shouldComponentUpdate 为 false

class WrappedIframe extends React.Component {
  shouldComponentUpdate() {
    return false;
  }
  render() {
    return (<iframe src={ this.props.url } />);
  }
}