React自定义组件应用

React自定义组件应用

今天在学习React自定义组件的时候就联想到了以前在学小程序的时候写的自定义组件，不过它们子向父传递数据和父向子传递数据的方式是有所不一样的。

组件化编码流程

这里经过一个案例来演示。

1. 拆分组件: 拆分界面,抽取组件
2. 实现静态组件: 使用组件实现静态页面效果
3. 实现动态组件：动态显示初始化数据(数据类型、数据名称)
4. 交互(绑定事件监听等)

好比实现下面这个todos，由于这里主要是要讲组件，因此对这些样式什么的就不作详细的解释了。

将这一整个当作App组件，里面分红4个小组件，分别为Header、List、Item、Footer。下面经过这个案例来讲一下子向父传递数据和父向子传递数据的方法。

1. 父向子传递数据

动态渲染List

首先，Item 是 List 的子组件，在动态渲染的过程当中，要用一个 List 向 Item 传递列表的值让 Item 渲染出来，此时咱们没办法直接让列表的数据直接从List传递到Item，所以应该把此时的状态state中的数据todos定义在App组件中，经过App组件传给App组件的子组件List，再由List将值传递给Item从而将todos渲染出来。子组件再从this.props取出从父组件传过来的值。

简单讲，这里的涉及到的知识点就是父向子传递数据。

// App.jsx
export default class App extends Component {
    state = {
        todos: [
            { id: '1', name: '吃饭', done: true },
            { id: '2', name: '睡觉', done: false },
            { id: '3', name: '打代码', done: false },
        ]
    }
    render() {
        const { todos } = this.state;
        return (
            <div className="todo-container">
                <div className="todo-wrap">
                    <Header></Header>
                    <List todos={todos}></List>
                    <Footer></Footer>
                </div>
            </div>
        )
    }
}
复制代码

}
复制代码

以前学习小程序的时候，也有这个知识点(微信小程序——自定义组件)，不过React中的子向父传递数据中，咱们是要对props进行类型限制，在小程序中，还须要子组件在json文件中的properties中定义从父组件传递的数据。

注意点：

• 表示是否完成的checkbox的checked属性值应为defalutChecked，不然checked值没法经过点击改变
• 在渲染todos要给每个Item添加一个key值(key={todos.id})

2. 子向父传递数据

input添加todos

Header要将用户输入的值传递给List须要通过这个数据传递的过程：Header -> App -> List；

也就是说，这个的传递数据方式与上面的动态渲染相比，多了一个子向父传递数据。这个的实现方式是经过props从父组件App给子组件List传递一个函数(addTodos)。也就是说，在React中，子向父传递数据是经过函数来创建关系的。

addTodos = (todoObj) => {
    const { todos } = this.state;
    const newTodos = [todoObj, ...todos];
    this.setState({ todos: newTodos });
}
复制代码

接着，在子组件(Header)中调用这个函数，当键盘按回车键的时候调用这个函数，而后把用户输入的东西给父组件中定义的函数。

handleKeyUp = (e) => {
    const { keyCode, target } = e;
    if (keyCode !== 13) return;
    if (target.value.trim() === '') return;
    const todoObj = { id: nanoid(), name: target.value, done: false }
    this.props.addTodos(todoObj)
    target.value = '';
}
复制代码

有一个库(uuid)可以获取惟一标识，给id赋值，让每个item都有一个独一无二的id值做为key，进行遍历。在终端输入npm install uuid或者npm add nanoid均可如下载这个库，前者的文件比较大，建议下载第二个。在要调用的时候记得在引入import {nanoid} from 'nanoid'。

对props进行限制

对props传递的属性类型进行必要性的限制。设置了类型以后，若是在传的值不是这个类型的话，就会报错

引入prop-types库：在终端输入npm add prop-types。 引入import PropTypes from 'prop-types'

static propTypes {
    addTodos: PropTypes.func.isRequired
}
复制代码

总结

1. 拆分组件、实现静态组件。注意：className、style的写法

2. 动态初始化列表，若是是在某个组件使用就将state放在自身，若是是在多个组件使用就放在父组件中(状态提高)

3. 【父组件】给【子组件】传递数据：经过props传递

   【子组件】给【父组件】传递数据：经过props传递，要求父提早给子一个函数

4. 注意defaultChecked和checked的区别。相似的还有：defaultValue和value

5. 状态改变记得setState