как добавить событие клика и получить dom в iframe с помощью response-frame-component?

Question

Я использую компонент response-frame-component для создания iframe, я хочу привязать событие click к iframe и получить dom, который id равен ab c в iframe. как это сделать?

выше это мой код, он будет выводить 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

Вам необходимо использовать contentDidMount prop (не componentDidMount).

contentDidMount и contentDidUpdate концептуально эквивалентны componentDidMount и componentDidUpdate соответственно. Причина, по которой они необходимы, заключается в том, что внутри мы вызываем ReactDOM.render, который запускает новый набор вызовов жизненного цикла. Этот набор вызовов жизненного цикла иногда запускается после жизненного цикла родительского компонента, поэтому эти обратные вызовы обеспечивают ловушку, чтобы узнать, когда содержимое фрейма смонтировано и обновлено.

Этот код должен печатать консоль .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>
    )
};