如何在 React 中更改滚动条上的背景视频？

Question

我正在尝试使用 react-intersection-observer 更改滚动条上的背景视频。当 inView 变为 true 时，useEffect 必须将状态更改为 sample2，并将新视频发送到 startscreen，它用作固定位置的背景视频。状态在变，视频还是一样

//开始画面

    const Startscreen = ({ sample }) => {
console.log(sample);
      return (
          <video className="videoTag" autoPlay loop muted>
            <source src={sample} type="video/mp4" />
          </video>
      );
    };

//App.js

import sample1 from "./videos/0.mov";
import sample2 from "./videos/2.mov";

function App() {
  const [state, setState] = useState(sample1);
  const { ref, inView, entry } = useInView({
    threshold: 0.5,
  });

  useEffect(() => {
    if (inView === true) {
      setState(sample2);
    } else {
      setState(sample1);
    }
    console.log(state);
  }, [inView]);

  return (
    <div className="App">
      <Startscreen sample={state} />
      <div ref={ref}>
        <AboutMe> 
    </div>
    </div>
)};

Answer 1

当您更改视频源时，<video/> 元素不会重新加载，如以下答案中所述：.

一个解决方法是

  return (
      <video key={sample} className="videoTag" autoPlay loop muted>
        <source src={sample} type="video/mp4" />
      </video>
  );

关于您的应用实施的一些注意事项

您根本不需要 useEffect，因为当 inView 更改时您的组件将重新呈现。所以你实际上根本不需要状态，因为你可以从 inView 计算你的样本。试试这个：

function App() {
  const { ref, inView, entry } = useInView({
    threshold: 0.5,
  });
  const sample = inView ? sample2 : sample1;
  console.log(sample);

  return (
    <div className="App">
      <Startscreen sample={sample} />
      <div ref={ref}>
        <AboutMe> 
      </div>
    </div>
)};

另请注意，在您的原始代码中，当您调用 console.log(state);时，您实际上是在调用您之前的状态值，而不是您刚刚设置的状态值。

的确，如果你的状态是 sample1，调用 setState(sample2); 那么 console.log(state); 将打印 sample1。 state 将在下一次由此 setState 引起的重新渲染后等于 sample2，但您不会在每次渲染时登录，仅在 inView 更改时登录。您还可以通过将 state 添加到 useEffect 依赖项数组来设法在重新渲染中记录新状态：

useEffect(() => {
    if (inView === true) {
      setState(sample2);
    } else {
      setState(sample1);
    }
    console.log(state);
  }, [inView, state]);

如何在 React 中更改滚动条上的背景视频？

How to change background video on scroll in React?

reactjs

react-intersection-observer

关于您的应用实施的一些注意事项