为什么没有定义组件 [英] Why is Component not defined

问题描述

我正在创建一个明信片应用程序.为了利用网络摄像头，我正在使用窗口对象上可用的 webkitURL 并使用 react

构建应用程序

我尝试分别测试每个功能，一切都很好，但是一旦我将所有东西放在一起，我在控制台中收到此错误 'Component' is not defined'.

这是截图

给定错误

所以*我的问题是:

为什么组件不可用?

可以在 Capture 组件之后保存我的照片和相机功能吗?

这也是我当前的代码:

从'react'导入反应；从 'react-dom' 导入 ReactDOM；//CSS 样式常量样式 = {捕获: {显示:'弹性'，flexWrap: '换行',justifyContent: '中心',},图片尺寸:{显示:'弹性'，最大宽度:340，最大高度:340，最小宽度:340，最小高度:340，保证金:30，},盒子: {最大宽度:340，最大高度:340，最小宽度:340，最小高度:340，边框:'10px 纯绿色',}}//组件类捕获扩展组件{构造函数(道具){超级(道具)；这个.state = {约束:{音频:假，视频:{宽度:400，高度:300}}};this.handleStartClick = this.handleStartClick.bind(this);this.takePicture = this.takePicture.bind(this);this.clearPhoto = this.clearPhoto.bind(this);}组件DidMount(){const 约束 = this.state.constraints;const getUserMedia = (params) =>(新承诺((成功回调，错误回调)=> {navigator.webkitGetUserMedia.call(navigator, params, successCallback, errorCallback);}));获取用户媒体(约束).then((流) => {const video = document.querySelector('video');常量 vendorURL = window.URL ||窗口.webkitURL;video.src = vendorURL.createObjectURL(stream);视频.play();}).catch((错误) => {控制台日志(错误)；});this.clearPhoto();}清除照片(){const canvas = document.querySelector('canvas');const photo = document.getElementById('photo');常量上下文 = canvas.getContext('2d');常量 { 宽度，高度 } = this.state.constraints.video;context.fillStyle = '#FFF';context.fillRect(0, 0, 宽度, 高度);常量数据 = canvas.toDataURL('image/png');photo.setAttribute('src', 数据);}处理开始点击(事件){event.preventDefault();this.takePicture();}拍照片(){const canvas = document.querySelector('canvas');常量上下文 = canvas.getContext('2d');const video = document.querySelector('video');const photo = document.getElementById('photo');常量 { 宽度，高度 } = this.state.constraints.video;画布.宽度 = 宽度；canvas.height = 高度；context.drawImage(视频, 0, 0, 宽度, 高度);常量数据 = canvas.toDataURL('image/png');photo.setAttribute('src', 数据);}使成为() {返回 (
(

解决方案

你还没有声明 Component 并使用它来扩展你的类 Capture.

首先你需要像这样导入它:

import React, { Component } from 'react'

或者正如@masterpreenz 在评论中建议的那样，将你的类声明更改为:

class Capture 扩展 React.Component {...}

I am creating a postcard application. To utilize the webcam I am using webkitURL which is available on the window object and building the app using react

I tried to test each function separately and all was well, but once I placed everything together I get this error 'Component' is not defined' in the console.

Here is a screenshot

Given Error

So *my question is:

why is Component not available?

Is it okay to save my Photo and Camera functions after my Capture component?

Here is my current code as well:

import React from 'react';
import ReactDOM from 'react-dom';


// CSS Styling

const styles = {
  capture: {
    display: 'flex',
    flexWrap: 'wrap',
    justifyContent: 'center',
  },
  picSize: {
    display: 'flex',
    maxWidth: 340,
    maxHeight: 340,
    minWidth: 340,
    minHeight: 340,
    margin: 30,
  },
  box: {
    maxWidth: 340,
    maxHeight: 340,
    minWidth: 340,
    minHeight: 340,
    border: '10px solid green',
  }
}

//Components

class Capture extends Component{
  constructor(props) {
    super(props);
    this.state = {  
  constraints: { audio: false, video: { width: 400, height: 300 } }
  };
    this.handleStartClick = this.handleStartClick.bind(this);  
    this.takePicture = this.takePicture.bind(this);  
    this.clearPhoto = this.clearPhoto.bind(this);  
  }
  componentDidMount(){
    const constraints = this.state.constraints;  
    const getUserMedia = (params) => (  
  new Promise((successCallback, errorCallback) => {
    navigator.webkitGetUserMedia.call(navigator, params, successCallback, errorCallback);
  })
);

getUserMedia(constraints)  
.then((stream) => {
  const video = document.querySelector('video');
  const vendorURL = window.URL || window.webkitURL;

  video.src = vendorURL.createObjectURL(stream);
  video.play();
})
.catch((err) => {
  console.log(err);
});

this.clearPhoto(); 
  }
clearPhoto(){
      const canvas = document.querySelector('canvas');  
      const photo = document.getElementById('photo');  
      const context = canvas.getContext('2d');  
      const { width, height } = this.state.constraints.video;  
      context.fillStyle = '#FFF';  
      context.fillRect(0, 0, width, height);

      const data = canvas.toDataURL('image/png');  
      photo.setAttribute('src', data); 
    }
handleStartClick(event){
    event.preventDefault();  
    this.takePicture();  
    }
takePicture(){
    const canvas = document.querySelector('canvas');  
    const context = canvas.getContext('2d');  
    const video = document.querySelector('video');  
    const photo = document.getElementById('photo');  
    const { width, height } = this.state.constraints.video;

    canvas.width = width;  
    canvas.height = height;  
    context.drawImage(video, 0, 0, width, height);

    const data = canvas.toDataURL('image/png');  
    photo.setAttribute('src', data);  
}
render() {
    return (  
      <div className="capture"
        style={ styles.capture }
      >
        <Camera
          handleStartClick={ this.handleStartClick }
        />
        <canvas id="canvas"
          style={ styles.picSize }
          hidden
        ></canvas>
        <Photo />
      </div>
    );
  }
}
const Camera = (props) => (
  <div className="camera"
    style={ styles.box }
  >
    <video id="video"
      style={ styles.picSize }
    ></video>
    <a id="startButton"
      onClick={ props.handleStartClick }
      style={ styles.button }
    >Take photo</a>
  </div>
);

const Photo = (props) => (
    <div className="output"
    style={ styles.box }
  >
    <img id="photo" alt="Your photo"
      style={ styles.picSize }
    />
    <a id="saveButton"
      onClick={ props.handleSaveClick }
      style={ styles.button }
    >Save Photo</a>
  </div>
);
ReactDOM.render(
  <Capture />,
  document.getElementById('root')
);

解决方案

You haven't declared Component and using it to extend your class Capture.

First you need import it like so:

import React, { Component } from 'react'

Or as @masterpreenz suggested in the comment change your class declaration to:

class Capture extends React.Component {
 ...
}

这篇关于为什么没有定义组件的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！