Как получить доступ к ссылке в функциональном дочернем компоненте, который включен в функцию соединения React-Redux?

Question

У меня есть компонент родительского класса и дочерний функциональный компонент. Дочерний компонент имеет элемент, на который я хотел бы обратить внимание, когда другой элемент на странице (модальный) закрыт. Чтобы добиться этого, я пытаюсь переслать ссылку на дочерний компонент. Однако дочерний компонент обернут в функцию соединения React-Redux. Я пробовал несколько разных способов пересылки ссылок, но пока не смог заставить его работать.

Я не могу обновить ни одну из версий своего пакета. Я использую React 16.6.0, Redux 4.0.1 и React-Redux 5.1.0.

Ниже вы найдете представление того, что я описываю.

class Parent extends React.Component {
 constructor() {
  ...
  this.childRef = React.createRef();
 }
 render() {
  return(
   <Child ref={childRef}/>
  )
 }
}


const Child = forwardRef(props, ref) => {
 return(
  <input ref={ref} />
 )
}

export default connect(
 mapStateToProps,
 mapDispatchToProps,
 null,
 { forwardRef: true}
)(Child);

С помощью установки, размещенной выше, я могу получить доступ к ссылке в родительском компоненте, но она указывает на соединение, а незавернутый ребенок.

Answer 1

Это не вариант использования для forwardRef (Вы можете использовать его, но вам это не нужно).

Ваша проблема в том, что вы не можете назвать a prop как ref (или key), просто переименуйте его, и все будет в порядке.

<Child parentRef={childRef}/>


const Child = ({ parentRef }) => <input ref={parentRef} />