假如我把下面注释1的<MainComponent listArr={listArr}/>改掉，比如改成<MainComponent helloreactjs={listArr}/>
然后在注释2里获取的时候换成<ListComponent listArr={this.props.helloreactjs}/>
可是为什么在注释3里为什么会报错?
这些组件命名是怎么一回事？
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<link rel="stylesheet" type="text/css" href="./css/bootstrap.css">
<style type="text/css">.down_select{height: 20px;background: #fff;width: 60px;color: #000;}.handle {width: 40px;border:1px solid #ccc;background: #fff;position: absolute;right: 10px;top:1px;text-align: center;}.handle a{display: block;text-decoration: none;}.list-group-item .centence{padding: 0px 50px;}.user{font-size: 22px;}.reply {margin-top: 0px;}.list-group li {transition: .5s;overflow: hidden;}</style>
<script src="./src/react.js"></script><script src="./src/react-dom.js"></script><script src="./src/browser.min.js"></script>
</head>
<body>
<div class="container" id="demo">
</div>
</body>
<script type="text/babel">
var ItemComponent = React.createClass({
render: function() {
return(
<li className="list-group-item">
<p className="user" ><span >{this.props.userName}</span><span>说:</span></p>
<p className="centence">{this.props.content}</p>
</li>
)
}
});
var ListComponent = React.createClass({
render: function() {
return(
<div className="col-md-8">
<h3 className="reply">message：</h3>
<ul className="list-group">
{
this.props.listArr.map(function(item,index){
return <ItemComponent key={index} {...item}/>
})
}
</ul>
</div>
)
}
});
var MesComponent = React.createClass({
render: function() {
return(
<div className="col-md-4">
<form className="form-horizontal">
<div className="form-group">
<label>username</label>
<input ref="text_user" type="text" className="form-control" placeholder="username" />
</div>
<div className="form-group">
<label>content</label>
<textarea ref="text_content" className="form-control" rows="6" placeholder="content"></textarea>
</div>
<div className="form-group">
<div className="col-sm-offset-2 col-sm-10">
<button type="button" onClick={this.addItemHandle} className="btn btn-default pull-right">submit</button>
</div>
</div>
</form>
</div>
)
},
addItemHandle: function() {
var userName = this.refs.text_user.value;
var content = this.refs.text_content.value;
this.props.addItem({
userName:userName,
content:content
});
}
});
var MainComponent = React.createClass({
getInitialState: function() {
return {
listArr:this.props.listArr
}
},
addItem:function(data){
this.state.listArr.push(data);<!--注释3-->
this.setState({
listArr:this.state.listArr
})
},
render: function() {
return(
<div className="container">
<MesComponent addItem={this.addItem}/>
<ListComponent listArr={this.props.listArr}/><!--注释2-->
</div>
)
}
});
var listArr = [
{
userName:"marry",
content:"come here",
_id:Date.now()+1
},{
userName:"lilei",
content:"out",
_id:Date.now()
}
]
ReactDOM.render(
<MainComponent listArr={listArr}/>,<!--注释1-->
document.getElementById("demo")
)
</script>
</html>
MainComponent 的 this.state.listArr 根据 this.props.listArr 来赋值，由于你修改之后 this.props.listArr === undefined 所以 this.state.listArr === undefined，自然注释3 的 this.state.listArr.push 会报错了。
getInitialState: function() {
return {
listArr:this.props.listArr
}
},
addItem:function(data){
this.state.listArr.push(data);<!--注释3-->
this.setState({
listArr:this.state.listArr
})
},这里this.props.listArr你不换？