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

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

0 голосов
/ 11 ноября 2018

У меня есть два родственных компонента 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. Я использую imageData для анализа QR-кода.

1 Ответ

0 голосов
/ 11 ноября 2018

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

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

Пример 

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

class CaptureArea extends React.Component {
  componentDidMount() {
    console.log(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/react@16.6.1/umd/react.production.min.js"></script>
<script src="https://unpkg.com/react-dom@16.6.1/umd/react-dom.production.min.js"></script>

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