小编Tri*_*tan的帖子

我正在编写一个组件，从 Giphy 中提取 gif 并将它们呈现在 React 无限滚动组件中。无限滚动按预期工作，但后来遇到了问题。我希望 GIF 自动播放，所以我添加了自动播放属性。然后我意识到，如果同时播放所有 gif，性能就会消失。
我尝试了许多不同的解决方案，包括为每个视频组件附加一个引用，并使用react-visibility-sensor在可见时尝试播放，但我无法找到一种有效的方法。
这是当前每个 mp4 自动播放的组件。我已经删除了 VisibilitySensor，因为我无法让它工作。

  const videoRefs = useRef(
    [...new Array(gifArray.length)].map(() => createRef()),
  );

  return (
    <div>
      {gifArray && (
        <InfiniteScroll
          dataLength={gifArray}
          next={getMore}
          hasMore={true}
          loader={<div>Loading...</div>}
        >
          {gifArray.map((gif, i) => {
            return (
              <video
                width='320'
                height='240'
                loop
                autoPlay
                key={gif.id}
                ref={videoRefs.current[i]}
              >
                <source src={gif.images.downsized_small.mp4} type='video/mp4' />
              </video>
            );
          })}
        </InfiniteScroll>
      )}
    </div>
  );
};

数据在单独的组件中检索并作为 props 传递。

export const HomePage = () => {
  const [gifObject, setGifObject] = useState([]);
  const [searchValue, setSearchValue] …

我正在尝试更改 Material-UI Switch 的大小，因为默认大小不够大。我已经设法增加了大小，但现在的行为并不理想。
当它处于默认状态时看起来不错：

但是，当我更改其状态时，它会失去样式：

我不知道如何更改样式，因此拇指一直到轨道的右侧。

 <Switch
   onChange={setPrivateSwap}
   classes={{
     root: classes.root,
     switchBase: classes.switchBase,
     checked: classes.checked,
     track: classes.track,
     thumb: classes.thumb,
   }}
 />

const useStyles = makeStyles({
  root: {
    width: '90px',
    height: '50px',
    padding: 0,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
  },
  track: {
    width: '40px',
    height: '20px',
    borderRadius: '10px',
  },
  switchBase: {
    '&$checked': {
      color: '#007D81',
    },
    '&$checked + $track': {
      backgroundColor: 'rgba(0,125,129,0.3)',
    },
  },
  checked: {},
  thumb: {
    width: '32px',
    height: '32px',
  },
});