Блог

Главная - Вопросы по программированию - Почему я получаю ошибку, когда использую forwardRef в react-native?

Почему я получаю ошибку, когда использую forwardRef в react-native?

#reactjs #react-native #react-hooks #use-ref #react-forwardref

Вопрос:

Я просто пытаюсь понять, как использовать это свойство.

В мой основной файл я добавил эти:

 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;

вот в чем ошибка,

введите описание изображения здесь

Комментарии:

1. Пользовательский интерфейс должен быть отрисован один раз, чтобы ссылка React имела подключенный HTMLDOMNode для доступа.

2. Итак, что это значит, сэр, что я должен сделать, чтобы это исправить?

Ответ №1:

Это означает, что вам нужен дополнительный цикл рендеринга, прежде чем ссылка будет определена и присоединена к DOMNode для вызова play функции. Вы можете добавить состояние «initialRender» и запустить эффект при втором рендеринге.

 const audioRef = useRef(null);

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

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

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

Комментарии:

1. Спасибо за попытку помочь, но все равно выдает ту же ошибку.

2. Я предполагаю, что react-native не поддерживает сам «звук», он выдает эту ошибку

3. Ах да, вы в React-Native. Да, похоже, вам нужен сторонний пакет для добавления звука в проект RN. реагирующий-родной-звук кажется популярным.

4. Возможно, вам все равно потребуется отправить ссылку, если вы пытаетесь запустить аудиофайл из родительского компонента, и в этом случае вам может потребоваться взглянуть на крючок реакции useImperativeHandle.

Ответ №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>
  )
})

Комментарии:

1. Да, но если я запишу его как аудио, он все равно выдаст ошибку. Я думаю, это потому, что react-native не поддерживает аудиокомпонент, поэтому, если я хочу его использовать, мне придется импортировать стороннюю программу. Спасибо, что ответили

2. Да, в react-native нет встроенного компонента, доступного для аудио, вам придется установить стороннюю библиотеку или вам придется создать свой собственный собственный аудиомодуль.

Метки: ,