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

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

我需要其他组件来调用诸如.playAsync()和.pauseAsync()之类的方法，而又不会将它们作为道具传递下来。

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

最佳答案

我没有使用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
}