gpt4 book ai didi

javascript - 为什么没有定义组件

转载 作者:行者123 更新时间:2023-11-30 08:25:43 24 4
gpt4 key购买 nike

我正在创建一个明信片应用程序。要使用网络摄像头,我正在使用窗口对象上可用的 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')
);

最佳答案

您还没有声明 Component 并使用它来扩展您的类 Capture

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

import React, { Component } from 'react'

或者按照@masterpreenz 在评论中的建议,将您的类声明更改为:

class Capture extends React.Component {
...
}

关于javascript - 为什么没有定义组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/46019268/

24 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com