用mobx防守裁判

Question

我正试图用react和mobx构建一个自定义组件视频播放器，我需要从主组件钻到子组件的引用，但当我在作为观察者的组件上使用forwardRef函数时，我收到了一条错误消息。错误消息是"0"；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的支持有什么帮助吗？或者有没有一种方法可以将ref存储在mobx商店中？

Answer 1

您使用的是什么版本的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);

observerHOC也有一个forwardRef选项，但它目前仅适用于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>;
});