爲什麼組件未定義

Question

我正在創建明信片應用程序。 爲了利用我使用webkitURL該方案可在窗口對象上，建設使用反應

我想單獨測試每個功能，一切都很好應用的攝像頭，但一旦我把一切事情都在一起，我得到控制檯中出現此錯誤'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

您還沒有宣佈Component並用它來擴展你的Capture類。

首先，你需要導入它就像這樣：

import React, { Component } from 'react' 

或者像@masterpreenz在評論建議改變你的類聲明：

class Capture extends React.Component { 
... 
} 

Answer 2

styles沒有定義的，因爲你永遠不創建樣式目的。從您的代碼中，您嘗試訪問當前未定義的styles對象的某些屬性。
您需要創建styles對象並定義它們的可用屬性。