如何使用react-frame-component添加点击事件并获取iframe中的dom？

Question

我使用react-frame-component创建了一个iframe，我想在iframe上绑定一个点击事件并在iframe中获取id为abc的dom。

以上是我的代码，它的将输出null，得到的元素是不工作的，我的代码有什么问题？

...
componentDidMount() {

    var iframe = document.getElementById("ccc");
    console.log(iframe);

    var iwindow = iframe.contentWindow;

    console.log(iwindow);

    var idoc = iwindow.document;

    console.log(idoc);

    console.log(idoc.getElementById('abc'));


  }
return (
      <div>
        <Frame id="ccc">
          <div id="abc">
            <div>this.state.show is true and now I'm visible</div>
          </div>
        </Frame>
      </div>
    );

Answer 1

你需要使用 内容已安装 prop(而不是componentDidMount)。

contentDidMount和contentDidUpdate在概念上分别相当于componentDidMount和componentDidUpdate。之所以需要这些，是因为在内部我们调用ReactDOM.render会启动一组新的生命周期调用。这组生命周期调用有时会在父组件的生命周期之后被触发，所以这些回调提供了一个钩子来知道框架内容何时被挂载和更新。

这段代码应该正确地打印 console.log

export default class App extends Component {
  componentDidMount() {}

  contentMounted() {
    console.log("---------1");
    var iframe = document.getElementById("ccc");
    console.log("1", iframe);

    var iwindow = iframe.contentWindow;

    console.log("2", iwindow);

    var idoc = iwindow.document;

    console.log("3", idoc);

    console.log("4", idoc.getElementById("abc"));
  }

  render() {
    return (
      <div className="App">
        <Frame id="ccc" contentDidMount={this.contentMounted}>
          <div id="abc">
            <div>this.state.show is true and now I'm visible</div>
          </div>
        </Frame>
      </div>
    );
  }
}

Answer 2

这样的东西可能会有用...

import { FrameContextConsumer } from 'react-frame-component';

const MyComponent = (props) => {
    const frameWindow = useRef(null);

    const getInnerHTML = () => {
        const iframeWindow = frameWindow.current;
        if(!iframeWindow) return;

        // here you got the iframe window object
        // work with it as you like
    };

    return (
        <Iframe onClick={getInnerHTML}>
            <FrameContextConsumer>
                {(frameContext) => {
                    const { document, window } = frameContext;
                    frameWindow.current = window;

                    return <div>Your content goes in this return statement</div>
                }}
            </FrameContextConsumer>
        </Iframe>
    )
};