react-dev-tools 与 iframe

iframe

<iframe> 表示嵌套的浏览上下文，有效地将另一个HTML页面嵌入到当前页面中。
在HTML 4.01中，文档可能包含头部和正文，或头部和框架集，但不能包含正文和框架集。但是，<iframe>可以在正常的文档主体中使用。
每个浏览上下文都有自己的会话历史记录和活动文档。包含嵌入内容的浏览上下文称为父浏览上下文。顶级浏览上下文（没有父级）通常是浏览器窗口。

组件中引入iframe

在组件中引入iframe，一个iframe对应一个document。虽然父子iframe可以通信，但是外部组件所在的应用与iframe所在应用是完全独立的，Redux 限定一个应用中只能有单一的store，他们当然也不会共享同一store。但是react-dev-tool在一个页面只能显示一个state tree。

实例

代码

class SigCoopDetial extends React.Component {
  componentDidMount() {
    document.title = '合同详情';
  }

  render() {
    return (
      <div>
        <h2 style={STYLE.title}>电子合同</h2>
        <iframe
          src={`${this.props.signPersonUrl}/web/sigcoop/partner/show?signPersonId=${signPersonId}`}
          frameBorder="0"
          width="100%"
          height="100%"
        ></iframe>
      </div>
    );
  }
}

SigCoopDetial.propTypes = {
  foo: PropTypes.object.isRequired,
};

export default connect(state => ({
  foo: state.create.foo,
}))(SigCoopDetial);

react-dev-tool只会显示父iframe对应的state树，不会显示子iframe对应的state树