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

我在我的应用程序上使用，它使用ref方法来处理视频的状态

我需要其他组件能够调用方法，例如

.playanc（）

和

.pauseAsync（）

，而无需将它们作为道具传递下去

---

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

因此，我不确定您的确切用例，但我相当确定在react中这样传递引用不是好的做法。您真的应该将updateThisComp函数传递到需要处理视频的地方

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

它可能看起来像这样

    const updateVideoState = (actionType) => {

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

然后在您的视频组件中

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

---

我不经常使用ref，因为我真的不喜欢它，reactjs的文档说明了为什么这不是最好的方法。我真的建议你先读这篇文章。但有时你别无选择。如果你真的想用它。你可以这样做：）希望这是一个很好的例子：）

//VideoService.js
让我们来看看视频；
功能设置视频（videoRef）{
_视频=视频参考
};
函数播放（）{
返回_video.playanc（）；
}
函数暂停（）{
return\u video.pauseAsync（）
}
导出常量视频服务={
setVideo，
玩
暂停
}
//YouCp.js
从“/VideoService”导入{VideoService}；
类YourCp扩展组件{
状态={}
render（）{
返回(
VideoService.setVideo（r）}/>
);
}
}
导出默认值；
//actions.js
从“/VideoService”导入{VideoService}；
导出常量播放=（）=>异步调度=>{
等待视频服务。播放（）
//其他逻辑
}

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

// 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
}