代码:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name=description content="">
<meta name=viewport content="width=device-width, initial-scale=1">
<title>Component Lifecycle: Mounting</title>
<link rel="stylesheet" type="text/css" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.2/css/bootstrap.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.13.0-beta.1/JSXTransformer.js"></script>
<style type="text/css">
body{margin: 25px;}
</style>
</head>
<body>
<button onClick="render()">Render</button>
<button onClick="unmount()">Unmount</button>
<hr />
<div id="panel"></div>
<script type="text/jsx;harmony=true">
/** @jsx React.DOM */
var APP = React.createClass({
update:function() {
var newVal = this.props.val + 1;
this.setProps({val:newVal});
},
componentWillMount:function() {
this.setState({m:2});
if (this.props.val === 0) {
this.btnStyle = {'color' : 'red'};
}
},
render: function() {
console.log("hello world");
return <button
style={this.btnStyle}
onClick={this.update}>
{this.props.val*this.state.m}
</button>
},
componentDidMount:function(rootNode) {
this.inc = setInterval(this.update, 500);
},
componentWillUnMount:function() {
console.log("goodbye cruel world!");
clearInterval(this.inc);
}
});
window.render = function() {
React.render(
<APP val={0} />,
document.getElementById('panel')
);
};
window.unmount = function() {
React.unmountComponentAtNode(
document.getElementById('panel')
);
};
</script>
</body>
</html>
我的结果:
如您所见，不知何故，为了让我清除Interval，未调用卸载。不过其他一切都正常。
我哪里出错了？
最佳答案
将 Brandon Pugh 在评论中的回答正式化:
方法是componentWillUnmount .
问题是由于大写的M:
...
},
componentWillUnMount:function() { // <- should be componentWillUnmount
console.log("goodbye cruel world!");
...
关于javascript - Reactjs 0.13 未调用 componentWillUnMount，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/28955140/