reactjs - 为什么我在 react-native 中使用 forwardRef 时会出错？

Question

我只是想了解如何使用这个属性。

在我的主文件中，我添加了这些：

import Audio from "../../../src/Audio";

const audioRef = useRef(null);

  useEffect(()=> {
    audioRef.current.play();
  }, [])

退货中：

<View>         
    <Audio ref={audioRef} />    
</View>

这是 Audio.js

import React from "react";
import Song from "./components/song/song.mp3";

const Audio = React.forwardRef((props,ref) => {

  return(
    <audio src={Song} ref={ref}></audio>
  )
})

export default Audio;

这是错误，

Answer 1

您应该会收到错误，因为您可能违反了反应组件的规则。

就像在音频组件中一样，您正在使用另一个以音频开头的组件，它以小写字母开头，因为您应该使用以大写字母开头的组件名称。

看看错误代码。

const Audio = React.forwardRef((props,ref) => {

  return(
    // error is here component name must starts with a capital letter
    <audio src={Song} ref={ref}></audio>
  )
})

Answer 2

这意味着在定义 ref 并将其附加到 DOMNode 以调用函数之前，您需要一个额外的渲染周期play。您可以添加“initialRender”状态并在第二次渲染时触发效果。

const audioRef = useRef(null);

const [initialRender, setInitialRender] = useState(true);

useEffect(() => {
  setInitialRender(false);
}, []);

useEffect(()=> {
  if (!initialRender) {
    audioRef.current.play();
  }
}, [initialRender]);