为什么组件未定义

我正在创建明信片应用程序。为了利用我使用webkitURL该方案可在窗口对象上，建设使用反应为什么组件未定义

我想单独测试每个功能，一切都很好应用的摄像头，但一旦我把一切事情都在一起，我得到控制台中出现此错误'Component' is not defined'。

下面是截图

所以*我的问题是：

为什么组件不可用？

在我的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') 
);

来源

2017-09-03 Sayran

是不是应该'扩展React.Component'？ – masterpreenz

@masterpreenz谢谢！哇我不能相信我忘记了，这是固定的，现在它的说法，风格没有定义 – Sayran

您还没有宣布Component并用它来扩展你的Capture类。

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

import React, { Component } from 'react'

或者像@masterpreenz在评论建议改变你的类声明：

class Capture extends React.Component { 
... 
}

来源

2017-09-03 00:26:04 Stigi

它应该是'反应，{组件}从'react''。你仍然需要React部分。 – Andy

styles没有定义的，因为你永远不创建样式目的。从您的代码中，您尝试访问当前未定义的styles对象的某些属性。
您需要创建styles对象并定义它们的可用属性。

来源

2017-09-03 01:09:09

复制，很好的捕获。我更新了我的代码。我非常感谢 – Sayran

为什么组件未定义

回答

相关问题