博客

组件拆分

以之前做的TodoList为例，先将其进行组件拆分

（参考上一篇文章：

React入门（TodoList实例）

）

在src目录下，新建一个TodoItem.js，写好基础结构

import React, { Component } from 'react';
class TodoItem extends Component {
  render() {
    return (
      <div >TodoItem</div>
    );
  }
}

export default TodoItem;

在TodoList.js文件中引入

import TodoItem from './TodoItem'

将

<li>...</li>

标签更换为

<TodoItem />


父组件向子组件传值

把父组件中item的值传递给TodoItem子组件，可以使用组件属性的形式

<TodoItem content={item}/> // 把item作为TodoItem属性content的值

在子组件中，通过

this.props.xxx

的形式接收

<div>{this.props.content}</div>

子组件向父组件传递数据

react是单向数据流

，所以在子组件中无法对父组件传递过来的值进行操作，需要借助父组件的方法，通过调用父组件的方法，在子组件中操作父组件中的数据

子组件要调用父组件方法，和传递数据差不多，只要在组件调用时，把方法传递给子组件就可以了

实现删除子项的功能

// TodoList.js
<ul>
  {
    this.state.list.map((item,index)=>{
      return (
        <XiaojiejieItem 
        key={index+item}  
        content={item}
        index={index}
        deleteItem={this.deleteItem.bind(this)}
        />
      )
    })
  }
</ul>

// TodoItem.js
handleDelete = () => {
  this.props.handleDelete(this.props.index)
}

render() {
  return (
    <div onClick={this.handleDelete}>{this.props.content}</div>
  );
}

使用 PropTypes 进行类型检查

在TodoItem中，可以使用PropTypes进行对父组件传递进来的值类型校验

在TodoItem.js中先引入PropTypes

import React, { Component } from 'react';

引入后，就可以在组件的下方进行引用了

可以对值进行数据类型检查

TodoItem.propTypes = {
  content: PropTypes.string,
  handleDelete: PropTypes.func,
  index: PropTypes.number
}

也可以做必传值校验

TodoItem.propTypes = {
  content: PropTypes.string.isRequired
}

还可以设置默认值

TodoItem.defaultProps = {
  content: 'learn react'
}

关于

使用 PropTypes 进行类型检查

，在官方文档中写得很清楚，有需要的可以进行查看

完整代码及在线预览

重点

1. 
   父组件向子组件传值，使用属性的形式进行传递。
   
2. 
   子组件无法直接操作父组件的数据，通过调用父组件传递过来的方法来操作父组件的数据