Javascript 为什么没有定义组件

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

我试着分别测试每个函数，结果都很好，但是一旦我把所有的东西放在一起，我就发现这个错误

“组件”没有在控制台中定义“

”

这是一个截图

所以我的问题是：

为什么组件不可用

在捕获组件之后保存照片和相机功能可以吗

以下是我当前的代码：

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')
);

从“React”导入React；
从“react dom”导入react dom；
//CSS样式
常量样式={
捕获：{
显示：“flex”，
flexWrap:“wrap”，
为内容辩护：“中心”，
},
图片大小：{
显示：“flex”，
最大宽度：340，
最大高度：340，
最小宽度：340，
身高：340，
差额：30，
},
方框：{
最大宽度：340，
最大高度：340，
最小宽度：340，
身高：340，
边框：“10px纯绿色”，
}
}
//组成部分
类捕获扩展了组件{
建造师（道具）{
超级（道具）；
this.state={
约束：{音频：false，视频：{宽度：400，高度：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=（参数）=>（
新承诺（（successCallback，errorCallback）=>{
调用（navigator、params、successCallback、errorCallback）；
})
);
getUserMedia（约束）
。然后（（流）=>{
const video=document.querySelector（'video'）；
const vendorURL=window.URL | | window.webkitURL；
video.src=vendorURL.createObjectURL（流）；
video.play（）；
})
.catch（（错误）=>{
控制台日志（err）；
});
这个.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'；
fillRect（0，0，宽度，高度）；
const data=canvas.toDataURL（'image/png'）；
photo.setAttribute（'src'，数据）；
}
handleStartClick（事件）{
event.preventDefault（）；
这张照片；
}
拍照{
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.height=高度；
drawImage（视频，0，0，宽度，高度）；
const data=canvas.toDataURL（'image/png'）；
photo.setAttribute（'src'，数据）；
}
render（）{
报税表（
);
}
}
常量摄影机=（道具）=>(
拍照
);
常量照片=（道具）=>(
保存照片
);
ReactDOM.render(
,
document.getElementById（'root'））
);

您尚未声明

组件

并使用它扩展类

捕获

首先，您需要像这样导入它：

import React, { Component } from 'react'

或者按照@masterpreenz在评论中的建议，将您的类声明更改为：

class Capture extends React.Component {
 ...
}

---

未定义

样式

，因为您从未创建样式对象。您正试图从代码中访问当前未定义的

样式

对象的某些属性。
您需要创建

样式

对象，并定义这些属性以使其可用。

替换此属性

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

进入

---

是不是应该是

extends React.Component

？@masterpreez谢谢！哇，我不敢相信我忘记了，这是固定的，现在它声明样式没有定义编辑应该是

import-React，{Component}来自'React'

。你还需要反应部分。收到，很好。我更新了我的代码。我非常感谢

import React, { Component } from 'react';