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

【问题标题】：Why do I get error when I use forwardRef in react-native?为什么我在 react-native 中使用 forwardRef 时会出错？
【发布时间】：2021-09-16 20:03:29
【问题描述】：

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

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

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;

这是错误，

【问题讨论】：

UI 需要渲染一次，以便 React ref 有一个附加的 HTMLDOMNode 可以访问。
那是什么意思，先生，我该怎么做才能解决它？

标签： reactjs react-native react-hooks use-ref react-forwardref

【解决方案1】：

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

const audioRef = useRef(null);

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

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

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

【讨论】：

感谢您的帮助，但仍然报同样的错误。
我猜 react-native 不支持“音频”本身，它给出了这个错误
哦，对了，你在 React-Native 中。是的，您似乎需要一个 3rd-party 包来为 RN 项目添加声音。 react-native-sound 似乎很受欢迎。
如果您尝试从父组件启动音频文件，您可能仍需要转发 ref，在这种情况下，您可能需要查看 useImperativeHandle React 挂钩。

【解决方案2】：

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

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

查看错误代码。

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

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

【讨论】：

是的，但是如果我把它写成音频，它仍然会出错。我认为这是因为 react-native 不支持音频组件，所以如果我想使用它，我必须导入第三方。感谢您的回复
是的，react-native 中没有可用于音频的内置组件，您应该安装第三方库或者您必须制作自己的音频原生模块。