Блог

я пытаюсь создать пользовательский компонентный видеопроигрыватель с помощью react и mobx, и мне нужно выполнить переход от основного компонента к дочернему компоненту, но я получаю сообщение об ошибке, когда я использую функцию forwardRef для компонента, который является наблюдателем. сообщение об ошибке: «Базовый компонент не является функцией» Вот код:

 // code for main component
const videoPlayer = () => {

const controlsRef = useRef<any>(null);

return (<div>
// video player screen code //
<VideoPlayerButtonCode ref={controlsRef} />
<div>)

}

// the code for the players component

interface IProps{
 controlsRef: any;
}

const VideoPlayerButtonCode: React.FC<IProps> = fowardRef({props from iprops}, controlsRef ) => {

return (<div>

<Button ref={controlsRef}>Button i want to get a ref for from main</Button>
<div>)

}

export default observer(VideoPlayerButtonCode)

  

это расплывчатая абстракция кода, но та же реализация.
есть ли какая-либо помощь в поддержке mobx для ссылки или есть способ сохранить ссылку в хранилище mobx?

Какую версию mobx-react вы используете? Он должен нормально работать с последней версией 7.0.0, но, похоже, он не работает, если вы используете mobx-react-lite@3.0.0 .

На данный момент я создал codesandbox со всеми рабочими вариантами: https://codesandbox.io/s/httpsstackoverflowcomquestions64227496-75xdz?file=/src/App.js

Например, та же версия, что и ваша, работает нормально:

 const ComponentWithForwardRef = React.forwardRef((props, ref) => {
  return <div ref={ref}>My Observer Component</div>;
});

const ObserverComponentWithForwardRef = observer(ComponentWithForwardRef);
  

Существует также forwardRef опция для observer HOC, но в настоящее время она работает только с mobx-react-lite , и не работает с обычным mobx-react пакетом из-за этой ошибки https://github.com/mobxjs/mobx-react/issues/868

Вы можете использовать его так:

 const MyObserverComponent = observer(
  (props, ref) => {
    return <div ref={ref}>My Observer Component</div>;
  },
  { forwardRef: true }
);
  

Если все не удается, вы можете просто использовать пользовательский реквизит для своей ссылки следующим образом:

 <MyObserverComponentCustomRef innerRef={myRef} />

// ...

const MyObserverComponentCustomRef = observer((props) => {
  return <div ref={props.innerRef}>My Observer Component Inner Ref</div>;
});