javascript - Why is Component not defined - Stack Overflow

admin管理员组

文章数量:1221319

I am creating a postcard application. To utilize the webcam I am using webkitURL which is available on the window object and building the app using react

I tried to test each function separately and all was well, but once I placed everything together I get this error 'Component' is not defined' in the console.

Here is a screenshot

Given Error

So *my question is:

why is Component not available?

Is it okay to save my Photo and Camera functions after my Capture component?

Here is my current code as well:

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')
);

I am creating a postcard application. To utilize the webcam I am using webkitURL which is available on the window object and building the app using react

I tried to test each function separately and all was well, but once I placed everything together I get this error 'Component' is not defined' in the console.

Here is a screenshot

Given Error

So *my question is:

why is Component not available?

Is it okay to save my Photo and Camera functions after my Capture component?

Here is my current code as well:

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')
);

• javascript
• reactjs
• html5-canvas

Share Improve this question Follow edited Sep 3, 2017 at 18:19 Sayran asked Sep 3, 2017 at 0:17 SayranSayran 16311 gold badge22 silver badges1111 bronze badges 2

• 1 Aren't it should be extends React.Component? – masterpreenz Commented Sep 3, 2017 at 0:23
• @masterpreenz Thanks! wow I can't believe I forgot that, thats fixed and now its stating that styles is not defined – Sayran Commented Sep 3, 2017 at 0:33

Add a comment  | 

3 Answers 3

Sorted by: Reset to default 14

You haven't declared Component and using it to extend your class Capture.

First you need import it like so:

import React, { Component } from 'react'

Or as @masterpreenz suggested in the comment change your class declaration to:

class Capture extends React.Component {
 ...
}

Replace this

import React from 'react';
import ReactDOM from 'react-dom';

into

import React, { Component } from 'react';

styles is not defined because you never created the styles object. From your code you're trying to access some properties of the styles object which are currently not defined.
You need to create the styles object and define those properties for them to be available.

本文标签： javascriptWhy is Component not definedStack Overflow