Передача ссылки от дочернего элемента к родительскому при взаимодействии с компонентом класса - PullRequest
Новая
       5

Передача ссылки от дочернего элемента к родительскому при взаимодействии с компонентом класса

0 голосов
/ 19 июня 2020

У меня есть iFrame в дочернем компоненте, и я хочу передать ссылку на iframe родительскому компоненту, чтобы я мог сделать postMessage для iframe. Я не уверен, как реализовать пересылку ссылок от дочернего к родительскому.

Спасибо!

Ответы [ 2 ]

0 голосов
/ 19 июня 2020

Если вам нужна дочерняя ссылка, это просто ... 

<ChildComponent
    ref={(instance) => {this.child = instance}}
/>

Затем вы можете вызывать дочерние функции в родительском, например this.child.childFunction().

Если вы хотите получить ссылку на дочерний элемент вашего ребенка , просто продолжайте этот шаблон.

Ваш дочерний класс: Установить ваш внук в вашем render(). 

render() {
    return (
        <GrandChildComponent
            ref={(instance) => {this.grandchild = instance}}
        />
    );
}

Родительский класс: Вызовите ссылку grandchild на дочерний компонент. 

var grandchild = this.child.grandchild;
0 голосов
/ 19 июня 2020

Вот пример, как это сделать 

const { forwardRef, useRef, useState, useEffect } = React;

const Child = forwardRef((props, ref) => {
  const computeDataUrl = (value) => {
    return `data:text/html,${encodeURI(value)}`
  }

  const [data, setData] = useState(computeDataUrl('Init'))
    
  const onMessage = ({data, origin}) => {
    setData(computeDataUrl(data));
  }
  
  useEffect(() => {
    const iFrameElement = ref && ref.current;
    
    if(iFrameElement) {
      const iFrameWindow = iFrameElement.contentWindow;
      
      iFrameWindow.addEventListener("message", onMessage, false);
    }
  
    return () => {
      iFrameWindow.removeEventListener("message", onMessage);
    }
  }, [])
  
  return <iframe ref={ref} src={data} width="400" height="300" sandbox="allow-same-origin allow-scripts">
  </iframe>
})

const Parent = () => {
  const ref = useRef();
  
  useEffect(() => {
    
    const iFrameElement = ref && ref.current;
    
    if(iFrameElement) {
      const postMessage = iFrameElement.contentWindow.postMessage;
      postMessage("Message from parent"); 
    }
  
  }, [ref])

  return <Child ref={ref}></Child>
}

ReactDOM.render(
    <Parent />,
    document.getElementById('root')
  );
<script src="https://unpkg.com/react/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>

<div id="root"></div>
...