为什么没有定义组件

Question

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

构建应用程序

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

这是截图

Given Error

所以*我的问题是：

为什么组件不可用？

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

这也是我当前的代码：

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

Answer 1

替换这个

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

进入

import React, { Component } from 'react';

Answer 2

您尚未声明 Component 并使用它来扩展您的类 Capture。

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

import React, { Component } from 'react'

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

class Capture extends React.Component {
 ...
}

Answer 3

styles 未定义，因为您从未创建样式对象。从您的代码中，您尝试访问当前未定义的 styles 对象的某些属性。
您需要创建 styles 对象并定义这些属性以使它们可用。