如何使用 React 和 Redux 从另一个组件访问 ref?

Posted

技术标签:

【中文标题】如何使用 React 和 Redux 从另一个组件访问 ref?【英文标题】:How to access ref from another component using React and Redux? 【发布时间】:2018-11-18 19:14:33 【问题描述】:

我在我的应用程序中使用Expo's Video component,它使用 ref 方法来处理视频的状态。

我需要其他组件能够调用 .playAsync().pauseAsync() 等方法,而无需将它们作为道具传递。

是否可以通过调度 redux 操作来调用这些方法?

【问题讨论】:

【参考方案1】:

我不经常使用 ref,我不太喜欢它,reactjs 的文档显示了为什么这不是最好的方法。我真的建议您先阅读此内容https://reactjs.org/docs/refs-and-the-dom.html。但有时你别无选择。如果你真的想使用它。你可以这样做 :) 希望这对你来说是一个很好的例子 :)

// VideoService.js

let _video;

function setVideo(videoRef) 
  _video = videoRef
;

function play() 
  return _video.playAsync();


function pause() 
  return _video.pauseAsync()


export const VideoService = 
  setVideo,
  play,
  pause


// YouCp.js
import  VideoService  from './VideoService';

class YourCp extends Component 
  state =   
  render() 
    return (
      <Video ref=r => VideoService.setVideo(r) /> 
    );
  


export default YourCp;

// actions.js
import  VideoService  from './VideoService';

export const play = () => async dispatch => 
  await VideoService.play()
  // other logic

【讨论】:

【参考方案2】:

所以,我不确定您的确切用例,但我相当肯定在反应中像这样传递引用并不是一个好习惯。您真的应该将 updateThisComp 函数传递到您需要操作视频的任何地方。

https://reactjs.org/docs/refs-and-the-dom.html

您应该添加一个方法或操作,通过传递这些 .playAsync 等来更新视频所在的组件状态...

它可能看起来像这样。

    const updateVideoState = (actionType) => 

         actionType === 'pause' ? 'updateYourReduxStoreVideoState' : undefined
               // change updateYourReduxStoreVideoState === true || false
   

然后在您的视频组件中...

<SomeVideoPackage pause=this.props.reduxStoreVideoStatePause />
          // this.props.reduxStoreVideoStatePause === true || false

或者....

componentDidMount()
     this.props.reduxStoreVideoStatePause ? this.referenceName.pauseAsync()

【讨论】:

以上是关于如何使用 React 和 Redux 从另一个组件访问 ref?的主要内容,如果未能解决你的问题,请参考以下文章

如何使用 react-redux 钩子测试组件?

Jest/Enzyme 单元测试:如何将存储传递给使用 redux 4 和 react-redux 6 连接功能的浅层组件

如何使用 React-Router 和 React-Redux 将道具发送到子路由组件?

在使用 React Router v5 和 Redux 时,无法弄清楚如何将 props 传递给组件

如何在 React/Redux 中本地管理组件的状态

如何从 React 组件 Redux Toolkit 中的 createAsyncThunk 获取结果