React Contextprovider принудительно обновляет видеоэлемент для воспроизведения видео

Я использую React Context, например this и действительно застрял в том, как обновить мой элемент видео (чтобы воспроизвести видео). Разве компоненты не должны обновляться автоматически при получении реквизита?

Вот упрощенная версия моего кода:


import React, { useState } from "react";
import ReactDOM from "react-dom";
import { Video } from "grommet";

import LanguageContext from "./language-context";
import LanguageSwitcher from "./LanguageSwitcher";

const App = () => {
  const [language, setLanguage] = useState("en");
  const value = { language, setLanguage };
  console.log(language); // shows language on click

  return (
    <LanguageContext.Provider value={value}>
      <h2>Current Language: {language}</h2>
      <p>Click button to change to jp</p>
      <div>
        {/* Can be nested */}
        <LanguageSwitcher />
          <VideoWrapper>
            <Video fit='cover' controls='over'>
                <source key='video' src="example.mp4" type='video/mp4' poster="example.jpg"/>
                   <track
                        srcLang={language}
                        src='//v2.grommet.io/assets/small-en.vtt'
                        default={true}
                    />
            </Video>
          </VideoWrapper>
      </div>
    </LanguageContext.Provider>
  );
};

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

И (в моем случае очень вложенный) дочерний компонент

import React, { useContext } from "react";

import LanguageContext from "./language-context";

const LanguageSwitcher = () => {
  const { language, setLanguage } = useContext(LanguageContext);
  return (
  //  <Component1>
  //    <Component2>
  //      <Component3>
  //        <Component4>
  //          <Component5>
                <button onClick={() => setLanguage("jp")}>
                 Switch Language (Current: {language})
                </button>
  //          </Component5>
  //        </Component4>
  //      </Component3>
  //    </Component2>
  //  </Component1>
  );
};

export default LanguageSwitcher;

язык-контекст.js

import React from "react";

// set the defaults
const LanguageContext = React.createContext({
  language: "en",
  setLanguage: () => {}
});

export default LanguageContext;

Пока все работает, язык можно прописать в консоли в корневом компоненте, но если я попытаюсь передать его как параметр видео, обновления не произойдет. Что сделать, чтобы видео запускалось после клика?


reactjs javascript state react-hooks grommet
person Tobi    schedule 19.05.2021    source источник

Ответы (1)


arrow_upward
0
arrow_downward

Я нашел ответ в [этом сообщении] [1], используя [ref] (https://reactjs.org/docs/refs-and-the-dom.html#the-ref-string-attribute), (контекст и состояния не были проблемой, они работали, как и ожидалось). В родительский компонент добавьте:

const vidRef = useRef();
const previousUrl = useRef(initState.language);
React.useEffect(() => {
    if (previousUrl.current === initState.language) {
      return;
    }

    if (vidRef.current) {
      vidRef.current.load();
    }

    previousUrl.current = initState.language;
  }, [initState.language]);

И в видеоэлементе

<VideoWrapper>
   <Video  fit='cover' controls='over' ref={vidRef} autoPlay>
     <source key='video' src='somevideo.mp4' type='video/mp4' />
       <track
          key='cc'
          label='English'
          kind='subtitles'
          srcLang={urlstate.language}
          src='//v2.grommet.io/assets/small-en.vtt'
          default={true}
       />
   </Video>
</VideoWrapper>



     


  [1]: https://stackoverflow.com/questions/41303012/updating-source-url-on-html5-video-with-react
person Tobi    schedule 20.05.2021