Как получить доступ к ref из другого компонента, используя React и Redux?

Question

Я использую Компонент видео Экспо в своем приложении, и он использует методы ref для обработки состояния видео.

Мне нужны другие компоненты, чтобы иметь возможность вызывать такие методы, как .playAsync() и .pauseAsync(), не передавая их как реквизиты.

Можно ли вызвать эти методы, отправив избыточное действие?

Answer 1

Я часто не использую ref, мне это не очень нравится, и документы по реагированию показывают, почему это не лучший способ.Я ДЕЙСТВИТЕЛЬНО рекомендую вам сначала прочитать это 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
}

Answer 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()
}