React组件化（三）

React的组件化思想

一.组件化伪代码

/*子组件 TodoItem.js */
import React, { Component } from 'react';

class TodoItem extends Component {
	render() {
		return (
			<div> item </div>
		)
	}
}
/*父组件 TodoList.js 导入和使用子组件*/
import TodoItem from './TodoItem';
import React , { Component } from 'react';

class TodoList extends Component {
	render() {
		return (
			<TodoItem />
		)
	}
}

二、组件间通信

1.父组件传值给子组件

主要是通过在父组件中添加属性的形式传值
for example （伪代码）

<TodoItem content={this.state.inputValue}/>

在子组件中接收

return (
<div> {this.props.content} </div>
)

这样便可以从子组件中接收到从父组件传递过来的inputValue值

2.子组件传值给父组件

class TodoItem extends Component {
	render() {
		return (
		)
	}
}