1.props和state的区别,state是内部的,内部的操作触发setState方法;props类似于Java的构造器传过来的参数,一般是外界传入的数据。
2.例子:主view由于点击事件,触发state中的数据变动,该state的数据又是子view的props中的数据
import React from 'react'
class MyOwnPage extends React.Component {
constructor(props) {
super(props);
this.state = {datas: [], data: '', index: 0};
this.clickButton = this.clickButton.bind(this);
}
render() {
return (
<div>
<h1>已插入信息</h1>
<DetailList datas={this.state.datas}/>
<input id={'input'}></input>
<button onClick={this.clickButton}>添加</button>
</div>
);
}
//点击按钮的方法
clickButton() {
console.log("点击了提交" + this.state.data);
this.setState((prevState) => (
{data: document.getElementById('input').value})
, function () {
console.log("设置的数据完毕");
var bean = {
value: this.state.data,
id: this.state.index
};
this.setState((prevState) => ({
datas: prevState.datas.concat(bean)
}), function () {
console.log("数据长度" + this.state.datas.length);
this.setState((preState) => (
{index: preState.index + 1}
));
});
});
}
}
export default MyOwnPage;
//类似于自定义view====这里使用了props
class DetailList extends React.Component {
render() {
console.log("传递过来的数据长度" + this.props.datas.length);
return (
<ul>
{this.props.datas.map(function (bean) {
console.log("这个的数据" + bean.id + bean.value);
return <li key={bean.id}>{bean.value}</li>;
})}
{/*es6的forEach*/}
{/*{*/}
{/*this.props.datas.map(bean => (*/}
{/*<li key={bean.id}>{bean.value}</li>*/}
{/*))*/}
{/*}*/}
</ul>
);
}
test() {
/*//遍历使用forEach*/
{
this.props.datas.forEach((bean) => (
<li key={bean.id}>{bean.value}</li>))
}
{/*//遍历使用map*/
}
{
this.props.datas.map(bean => (
<li key={bean.id}>{bean.value}</li>
))
}
//ES5的each
{
this.props.datas.forEach(function (bean) {
console.log("数据如下:" + bean.key + bean.value);
return <li key={bean.id}>{bean.value}</li>;
})
}
//ES5的map
{
this.props.datas.map(function (bean) {
return <li key={bean.key}>{bean.value}</li>;
})
}
}
}