Как переопределить родительский компонент после получения ссылки на ребенка с помощью ловушки useRef? - PullRequest
Новая
       9

Как переопределить родительский компонент после получения ссылки на ребенка с помощью ловушки useRef?

0 голосов
/ 16 февраля 2019

Я бьюсь головой, пытаясь обойти одну досадную проблему:

У меня есть родительский компонент и дочерний.У ребенка абсолютное позиционирование и динамический рост.Мне нужно рассчитать поля родителей в зависимости от роста ребенка.Я пытался сделать что-то вроде 

const Parent = () => {
  const childRef = useRef(null);
  return (
     <Child saveRef={ref} />
);

const Child = ({saveRef}) => (<div ref={saveRef}> </div>);

Но проблема в том, что родительский компонент не перерисовывается при выполнении Ref.Как я могу восстановить родительский компонент после получения Ref?

Заранее благодарен за любую помощь и совет.

Ответы [ 2 ]

0 голосов
/ 16 февраля 2019

Вы можете передать функцию в качестве реквизита дочернему элементу от родителя и вызывать эту функцию, когда вам необходимо повторно визуализировать родительский элемент.Изменение состояния вызовет рендеринг.Таким образом, в функции вы можете просто изменить состояние. 

class Parent extends React.Component{
 state = {ref : null}

 handleRef = ref => {
  this.setState({ ref });
  // your add you method for changing margin
 }

 render(){
   return <Child ref={this.state.ref} handleRefChange={this.handleRef} />
 }
}

Сохраните ссылку в родительском компоненте и вызовите handleRefChange из дочернего компонента, чтобы обновить его.

0 голосов
/ 16 февраля 2019

Напишите эффект в parent, который запускается при первоначальном монтировании.Этот эффект будет запущен после инициализации ссылки и отображения дочернего элемента.После этого сохраните в родительском состоянии состояние, которое представляет собой маржу, которую необходимо рассчитать, и после расчета маржи обновите состояние 

const Parent = () => {
  const childRef = useRef(null);
  const [margin, updateMargin] = useState(0);
  useEffect(() => {
     // calculate margin. Let call it margin
     updateMargin(margin);
  }, []);

  return (
     <Child saveRef={ref} />
);

const Child = ({saveRef}) => (<div ref={saveRef}> </div>);

РЕДАКТИРОВАТЬ: Чтобы обновить размер окна,вам нужно добавить прослушиватель событий при изменении размера окна и пересчитать высоту 

const Parent = () => {
  const childRef = useRef(null);
  const [margin, updateMargin] = useState(0);
  useEffect(() => {
     window.addEventListener('resize', handleResize);
     () => {
         window.removeEventListener('resize', handleResize);
     }
  }, []);

  const handleResize = () => {
       // use ref, calcualte margin and update
  }
  return (
     <Child saveRef={ref} />
);
...