用Mobx转发参考

问题描述

我正在尝试使用react和mobx构建自定义组件视频播放器，并且我需要钻研从主要组件到子组件的引用，但是在组件上使用forwardRef函数时出现错误消息那是一个观察者。错误消息是“ baseComponent不是函数” 这是代码：

// 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支持ref是否有任何帮助，或者有什么方法可以将参考存储在mobx存储中？

解决方法

您正在使用哪个版本的mobx-react？在最新的7.0.0版本上应该可以正常工作，但是如果您使用mobx-react-lite@3.0.0，它似乎会失败。

到目前为止，我已经制作了具有所有可用变体的codeandbox：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 HOC也有一个observer选项，但由于此错误，它目前仅与mobx-react-lite一起使用，不适用于常规mobx-react软件包。 {3}}

您可以这样使用它：

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>;
});

javascript mobx mobx mobx mobx mobx-react-lite reactjs reactjs reactjs reactjs