I am working with the latest version of react installed by NPM, I've written this code which works when i put it through the js fiddle program, but not when I try it in my own setup. here is the code I'm working with:
var React = require('react');
var MyButton = React.createClass({
render: function(){
return ( <button onClick={this.props.onClick} >more!</button> );
}
});
var Count = React.createClass({
getInitialState: function(){
return { counter: 0 };
},
increment: function(){
this.setState({
counter: this.state.counter + 1
});
},
render: function(){
return ( <div>
<li>{this.state.counter}</li>
<MyButton onClick={this.increment} />
</div> );
}
});
React.render( <Count />, document.getElementById('container'));
and then my html file looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>what the f</title>
</head>
<body>
<div id="container">
<!-- This element's contents will be replaced with your component. -->
</div>
<script src="js/main.js"></script>
</body>
</html>
in my browser i get an error saying:
"TypeError: undefined is not an object (evaluating 'this.__reactAutoBindMap')
(anonymous function)"
and a warning that says:
"Warning: Something is calling a React component directly. Use a factory or JSX instead. See: http://ift.tt/1HOmxEW"
I have no idea what the problem is and when i copy and paste to the js fiddle program it works as expected. I've been googling to no avail and just starting to learn so any help would be great, thank you in advance!
Aucun commentaire:
Enregistrer un commentaire