将函数组件转换为类组件

Posted 2023-03-16

【中文标题】将函数组件转换为类组件

【英文标题】：convert function components to class components

【发布时间】：2021-12-16 17:06:46

【问题描述】：

我这里有这个类组件

class App extends React.Component 
  getHowler() 
    this.player.howler;
  

  getDuration() 
    this.player.duration();
  

  getSeek() 
    this.player.seek();
  

  setSeek() 
    this.player.seek(0.5);
  
  // This sound file may not work due to cross-origin setting
  render() 
    return (
      <ReactHowler
        src="http://goldfirestudios.com/proj/howlerjs/sound.ogg"
        playing=true
        ref=(ref) => (this.player = ref)
      />
    );
  

我希望将其转换为功能组件。我想在函数组件中使用 react howler seek function。我怎样才能做到这一点？我从 react 中尝试了useRef，它给我一个错误。

该功能应该像这样工作： 每次我交换曲目时，它都应该从头开始播放

【参考方案1】：

const App = () => 
  const player = useRef(null)

  const getHowler = () => 
    player.current.howler;
  

  const getDuration = () => 
    player.current.duration();
  

  const getSeek () => 
    player.current.seek();
  

  const setSeek = () => 
    player.current.seek(0.5);
  

  render() 
    return (
      <ReactHowler
        src="http://goldfirestudios.com/proj/howlerjs/sound.ogg"
        playing=true
        ref=player
      />
    );
  

player.current === null 时您可能需要尽快返回 也可以将组件包裹在Error边界组件中 如果你想使用已经在生产中使用的完整功能组件，请随意使用包我写了一个名为atpro-howler的包，它是通过react-aptor与react集成的howler

【讨论】：

谢谢，伙计。这行得通。我错过了.current 部分。这就是为什么它不起作用

很高兴听到这个消息，请随意使用提到的包，它们是完全免费的，开源的。如果您不介意就您的用例给我反馈。如果它对你有帮助，请在 Github 上给我们一个开始，或者与你的朋友分享这个包:)

这与 Next Js 的兼容性如何？

我可能工作得像个魅力，但如果遇到任何问题，请告诉我github.com/amirHossein-Ebrahimi/raptor-howler/issues