Pourquoi le composant n'est pas défini

Question

Je crée une application de carte postale. Pour utiliser la webcam J'utilise webkitURL qui est disponible sur l'objet de la fenêtre et la construction de l'application à l'aide réagir

J'ai essayé de tester chaque fonction séparément et tout allait bien, mais une fois que je mis tout ensemble j'obtenir cette erreur 'Component' is not defined' dans la console.

Voici une capture d'écran

Given Error

Alors * ma question est:

pourquoi Component pas disponible?

Est-il acceptable de sauvegarder mes fonctions Photo et Appareil photo après mon composant Capture?

Voici mon code actuel ainsi:

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

Vous n'avez pas déclaré Component et l'utiliser pour étendre votre classe Capture.

Tout d'abord vous devez l'importer comme ceci:

import React, { Component } from 'react' 

Ou comme @masterpreenz suggéré dans le commentaire changer votre déclaration de classe à:

class Capture extends React.Component { 
... 
} 

Answer 2

styles n'est pas défini parce que vous jamais créé les styles objet. A partir de votre code, vous essayez d'accéder à certaines propriétés de l'objet styles qui ne sont actuellement pas définies. Vous devez créer l'objet styles et définir ces propriétés pour qu'elles soient disponibles.