javascript - 使用 mobx 转发 ref

Question

我正在尝试使用 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 的支持有什么帮助吗？或者有没有办法可以将 refrence 存储在 mobx 商店中？

Answer 1

什么版本的mobx-react你正在用吗？最新的 7.0.0 版本应该可以正常工作，但如果您使用 mobx-react-lite@3.0.0，它似乎会失败。 .
到目前为止，我已经制作了包含所有工作变体的代码框: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 }
);

如果一切都失败了，您可以像这样为您的 ref 使用自定义 Prop :

<MyObserverComponentCustomRef innerRef={myRef} />

// ...

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