我正在创建明信片应用程序。 为了利用我使用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')
);
是不是应该'扩展React.Component'? – masterpreenz
@masterpreenz谢谢!哇我不能相信我忘记了,这是固定的,现在它的说法,风格没有定义 – Sayran