【React】拆分组件与组件间传值

组件拆分

将一个大的组件可以拆分成几个组件 比如 TodoList 将搜索栏和展示栏分别设置为组件，将列表中的每一个列都设置为单独的组建例如：

<ul>
	{
		this.state.list.map((item,index) => {
			return (
				<TodoItem />
			)
		})
	}
</ul>

组件传值 React是视图层框架,负责的还是页面渲染和值.只能做一些简单的传值,具体大项目中要用对应的数据框架

父组件向子组件传递数据很简单，自己命名一个变量，再将要传递的数据放到{}中就可以了 如： content={message}，传递函数时要将这个函数绑定到自己（父组件）身上，不然子组件使用不了，父组件传递部分例子如下：

return (
    <TodoItem 
    index={index}  
	content={item}
	deleteItem={this.handleItemDelete.bind(this)}
    />
}
。
。
。
// 删除函数
handleItemDelete(index){
	const list = [...this.state.list];
	list.splice(index,1);
	console.log(index);
	this.setState({
		list:list
	})
}

• 子组件 要向父组件传值只能调用父组件的方法,修改相应的值

子组件通过 this.props 来调用接受到的参数

这里这个函数的具体调用过程就是，list信息保存在TodoList 的 state 中，所以要打到点击 TodoItem 就删除的效果，首先把删除函数绑定并传给子组件，子组件接收到index，content以及相关函数后，自己设定点击事件，将index放到删除函数中，相当于调用了父组件的函数，删除了父组件state中的值

import React,{Component} from 'react';
class TodoItem extends Component {
	constructor(props){
		super(props);
		// 这一句相当于把整个组件中的handleClick方法都与TodoItem绑定了 据说是更好一点
		this.handleClick=this.handleClick.bind(this);
	}
	render(){
		return(<li onClick={this.handleClick}>{this.props.content}</li>)
	}
	handleClick(){
		this.props.deleteItem(this.props.index)
	}
}
export default TodoItem;