赞
踩
父组件通过props向子组件传递数据。父组件通过item={item}这种方式向子组件传递数据,子组件通过this.props.item 来获取数据。
- //父组件
- <ul className="list">
- <todos.map((item,index)=>{
- return <Item item={item}/>
- })}
- </ul>
-
- //子组件
- class Item extends Component{
- render(){
- const item=this.props.item;
- return(
- <li className="item">{item}</li>
- )
- }
- }
props
是一个从外部传进组件的参数,由于React具有单向数据流,所以它的主要作用是从父组件向子组件传递数据,它是不可改变的。如果想要改变它,只能通过外部组件传入新的props
来重新渲染子组件,否则子组件的props
以及展现形式不会改变。
props除了可以传字符串、数字,还可以传数组,对象、甚至是回调函数。
state
的主要作用是用于组件保存、控制以及修改自己的状态,它只能在constructor
中初始化,state是可以被改变的。state放改动的一些属性,比如点击选中,再点击取消。类似的这种属性就可以放到state里。
没有state
的叫做无状态组件,多用props
少用state,
多写无状态组件。
- class Item extends Component{
- constructor(props){
- super(props);
- this.state={
- selected:false;
- }
还有一点要特别注意,在修改state的值时,直接对它操作是不行的。
- //无效的
- this.state.selected=!this.state.selected;
必须通过setState()方法。当我们调用this.setState
方法时,React会更新组件的数据状态state
,并且重新调用render
方法.
- //有效
- this.setState({
- selected:!this.state.selected
- });
主要区别:state
是组件自己管理数据,控制自己的状态,值是可以改变的;props
是外部传入的数据参数,不可变;
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。