Warum ist Komponente nicht definiert

Question

Ich erstelle eine Postkarte Anwendung. die Webcam zu nutzen ich webkitURL bin mit, die auf dem Fensterobjekt verfügbar ist und den Aufbau der App reagieren

ich jede Funktion einzeln zu testen versucht und alles war gut, aber wenn ich alles zusammengebracht ich Dieser Fehler 'Component' is not defined' in der Konsole.

Hier ist ein Screenshot

Given Error

So * meine Frage ist:

warum ist Component nicht verfügbar?

Ist es in Ordnung, meine Foto- und Kamera-Funktionen nach meiner Capture-Komponente zu speichern?

Hier ist mein aktueller Code auch:

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

Sie haben nicht Component erklärt und die Verwendung dieser Klasse Capture zu verlängern.

Zuerst müssen Sie es wie so importieren:

import React, { Component } from 'react' 

Oder wie @masterpreenz im Kommentar vorgeschlagen Klassendeklaration ändern:

class Capture extends React.Component { 
... 
} 

Answer 2

styles ist nicht definiert, weil man nie die Stile erstellt Objekt. Von Ihrem Code aus versuchen Sie, auf einige Eigenschaften des Objekts styles zuzugreifen, die derzeit nicht definiert sind.
Sie müssen das Objekt styles erstellen und diese Eigenschaften definieren, damit sie verfügbar sind.