ReactJS - как передать ссылку на компонент другому компоненту в качестве опоры?

У меня есть два родственных компонента WebcamStream и CaptureArea, я хочу передать ссылку на WebcamStream в качестве опоры CaptureArea, но когда я это делаю, она всегда равна нулю. Как это исправить?

class AppContent extends React.Component {
    constructor(props) {
        super(props);
        this.videoTag = React.createRef();
    }

    render() {
        return (
            <div id = "content">
                <WebcamStream ref = {this.videoTag}
                              width = "300" height = "300" 
                              title = "Real-time video stream from webcam" 
                              id = "video" />
                <CaptureArea x = "20" y = "20" width = "120" 
                             height = "120" color = "white" 
                             videoTag = {this.videoTag.current}/>
            </div>
        );
    }
}

Зачем мне это нужно:CaptureArea генерирует временный холст на текущем теге video, чтобы получить из него данные изображения. Я использую imageData для анализа QR-кода.

reactjs react-ref

11.11.2018 20:41

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

4 448

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

ref - это опора, используемая React внутри, во многом как опора key, поэтому вы можете назвать ее как-нибудь иначе и рассматривать ее как любую другую опору в компоненте WebcamStream.

innerRef - это общее имя для настраиваемой ссылки, которую вы прикрепляете к любому из элементов в компоненте.

Пример

function WebcamStream(props) {
  return <div ref = {props.innerRef}> WebcamStream </div>;
}

class CaptureArea extends React.Component {
  componentDidMount() {
    console.info(this.props.videoTag.current);
  }
  render() {
    return <div> CaptureArea </div>;
  }
}

class AppContent extends React.Component {
  videoTag = React.createRef();

  render() {
    return (
      <div id = "content">
        <WebcamStream
          innerRef = {this.videoTag}
          width = "300"
          height = "300"
          title = "Real-time video stream from webcam"
          id = "video"
        />
        <CaptureArea
          x = "20"
          y = "20"
          width = "120"
          height = "120"
          color = "white"
          videoTag = {this.videoTag}
        />
      </div>
    );
  }
}

ReactDOM.render(<AppContent />, document.getElementById("root"));

<script src = "https://unpkg.com/[email protected]/umd/react.production.min.js"></script>
<script src = "https://unpkg.com/[email protected]/umd/react-dom.production.min.js"></script>

<div id = "root"></div>

11.11.2018 20:47

Другие вопросы по теме

Реагировать на ссылки с помощью TypeScript: невозможно прочитать свойство 'current' из undefined

Создание ссылки в провайдере контекста реакции

React TypeScript: как сделать ссылку с помощью c => (this.c = c)?

Использование createRef в react-native с машинописным текстом?

Перенаправление ссылок через несколько компонентов

Прокрутка вверх в React-Native с помощью Flatlist

Передача ссылки React глубоко вложенным дочерним компонентам

Что делает передача ссылки на компонент элемента в React?

Недопустимое значение 0 передано в checkMaxIfStatementsInShader при попытке использовать холст через перехватчик React useRef

React - useRef - открыть поле выбора в фокусе

ReactJS - как передать ссылку на компонент другому компоненту в качестве опоры?

Ответы 1

Другие вопросы по теме

Похожие вопросы