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 (
)
}
}