枫枫知道个人博客|枫枫知道--React全系列课程

[[ slide_text ]]

[[ item.content ]]

枫枫知道--React全系列课程

发布时间：2022-02-10 作者：枫枫来源：枫枫知道个人博客

react

## 安装react包

```Python
npm i react react-dom
```

使用react

```HTML
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>react基本使用</title>

</head>
<body>
<div id="root"></div>


<script src="../node_modules/react/umd/react.development.js"></script>
<script src="../node_modules/react-dom/umd/react-dom.development.js"></script>
<script>
    // 2.创建react元素
    // 参数一：元素名称
    // 参数二：元素属性
    // 参数三：元素的节点
    const title = React.createElement("h1", null, "hello react")
    // 3.渲染react元素
    // 参数一：要渲染的react元素
    // 参数二：元素要渲染的位置，挂载点
    ReactDOM.render(title, document.getElementById('root'))
</script>
</body>
</html>
```

常用方法

1. `react-createElement`方法

```JavaScript
/*  
参数一：元素名称
参数二：元素属性，对象
参数三：第三个及其之后的参数都是元素的子节点
* */
const title = React.createElement(
    'p',
    {title: '我是标题', alt: '我是xxx'},
    React.createElement('span', null, '枫枫知道')
)
```
1. `react-render`方法

```JavaScript
// 参数一：要渲染的react元素
// 参数二：元素要渲染的位置，挂载点
ReactDOM.render(title, document.getElementById('root'))
```

## react脚手架的使用

```JavaScript
// 脚手架安装
npx create-react-app my_app
// 启动项目，进入创建的app
npm start
```

![](http://python.fengfengzhidao.icu/img/20211206092109.png)

看到这个界面就说明成功启动了，恭喜你，离升职加薪又近了一步

### npx命令介绍

1. npm v5.2.0 引入的一条命令
2. 目的：提升包内提供的命令行工具的使用体验
3. 原来：先安装脚手架包，再使用这个包中提供的命令
4. 现在：无需安装脚手架包，就可以直接使用这个包提供的命令

初始化项目：

```JavaScript
npx create-react-app my_app  // 推荐
npm init react-app my_app
yarn create react-app my_app
```

### 脚手架中使用react

```JavaScript
// 1. 导入文件
import React from 'react';
import ReactDOM from 'react-dom';

// 2.创建react元素
const title = React.createElement('h1', null, 'hello react！！！')

// 3. 渲染元素
ReactDOM.render(title, document.getElementById('root'))
```

# JSX的学习

什么是jsx

createElement的问题，写的太麻烦了，所以诞生了jsx

jsx是JavaScript XML的简写，表示在JavaScript中书写的xml格式的代码

优势：声明式语法更加直观，与HTML结构相同

使用jsx

```JavaScript
// 使用jsx
const title = <h1 id="枫枫">
    hello world
    <span>这是一个span</span>
    </h1>
```

### 为什么可以在脚手架中使用jsx语法？？？

1. jsx不是标准的ECMAScript语法，他是ECMAScript的语法扩展
2. 需要使用babel编译处理，才能在浏览器环境中使用
3. create-react-app脚手架中已经默认有该配置，无需手动配置
4. 编译jsx语法的包为：@babel/preset-react

### jsx的注意点

1. jsx的属性名为小驼峰
2. 特殊属性

```JavaScript
class -> className
for -> htmlFor
tabindex -> tabIndex
```

例如

```JavaScript
const title = <h1 className="title">我是枫枫</h1>
```
1. 如果一个元素没有子节点，直接使用单标签即可

例如

```JavaScript
const title = <h1 className="title">我是枫枫 <span/></h1>
```
1. 推荐使用小括号包裹jsx语法

例如

```JavaScript
const title = (
    <h1 className="title">我是枫枫
        <h2>哈哈哈</h2>
        <span/></h1>
)
```
1. jsx最外层只能有一个闭合标签

## 在jsx中使用js表达式

注意点：

1. 语法：`{ js表达式 }`
2. 使用单大括号，而不是双大括号

```JavaScript
let name = '枫枫知道'
const title = (
    <h1 className="title">我是{name}</h1>
)
```

### 条件渲染

```JavaScript
// 条件语句
let isloading = false
const loadData = () => {
    return isloading ? (<div>loading...</div>) : (<div>数据加载完成</div>)
}

const title = (
    <h1>条件渲染
        {loadData()}</h1>
)
```

### 列表渲染

使用数组的map方法，将数组的每个元素映射为一个li元素

渲染列表的时候也要添加key属性，key属性的值要保证唯一

原则：map()遍历谁，就给谁添加key属性

尽量避免使用索引号作为key

```JavaScript
// 列表渲染
const sons = [
    {id: 1, name: '像我这样的人'},
    {id: 2, name: '痴心妄想'},
    {id: 3, name: '南山南'},
    {id: 4, name: '我的未来不是梦'},
]
const list = (
    <ul>
        {sons.map(item => <li key={item.id} id={item.id}>{item.name}</li>)}
    </ul>
)
```

### 样式处理

行内样式（不推荐）

```JavaScript
const list = (
    <ul>
        {sons.map(item => <li style={{color: 'red', backgroundColor: '#333'}} key={item.id} id={item.id}>{item.name}</li>)}
    </ul>
)
```

类名—className（推荐）

```JavaScript
// 引入样式
import './css/index.css';
// 样式使用
const title = (
    <h2 className="title">
        枫枫知道
    </h2>
)
```

## React组件

React组件的两种创建方式

### 使用函数创建组件

- 约定1：函数名必须是大写字母开头
- 约定2：函数组件必须要有返回值，表示该组件的结构
- 如果返回值为null，表示不渲染任何内容

```JavaScript
// 函数组件

function Hello(){
    return (
        <h2>这是我的第一个函数组件</h2>
    )
}

const title = (
        <Hello/>
)
```

函数组件的使用

- 用函数名作为标签名
- 组件标签可以是单标签也可以是双标签

也可以使用箭头函数

```JavaScript
const Hello = () => <h2>这是我的第一个函数组件</h2>

const title = (
    <Hello/>
)
```

### 使用类创建组件

- 类组件：使用ES6的class创建的组件
- 约定1：类名必须大写
- 约定2：类组件应该继承React.Component父类，从而可以使用父类中提供的方法和属性
- 约定3：类组件必须提供render() 方法
- 约定4：render()方法必须要有返回值，表示该组件的结构

```JavaScript
// 类组件
class Hello extends React.Component {
    render() {
        return <div>这是一个类组件</div>
    }
}

const title = (
    <Hello/>
)
```

### 抽离为单独的js文件

组件多了之后，就应该把组件单独放在一个js文件中

1. 创建一个Hello.js文件

```JavaScript
import React from "react";

class Hello extends React.Component {
    render() {
        return <div>这是一个类组件</div>
    }
}

// 导出类组件
export default Hello
```
1. 在index.js中引入该组件

```JavaScript
import Hello from "./Hello";

const title = (
    <Hello/>
)

```

## 事件处理

react事件绑定语法与DOM事件语法相似

语法：on+事件名称={ 事件 处理程序}，比如：onClick={() => {} }

注意：react中的时间也才用小驼峰命名法

基于类组件

- 使用this.函数名触发

```JavaScript
class Hello extends React.Component {
    handleClick() {
        console.log('单击事件触发了！')
    }

render() {
        return <div onClick={this.handleClick}>这是一个类组件</div>
    }
}
```

基于函数组件

- 函数写在函数里面
- 使用函数名触发

```JavaScript
// 函数组件
function App() {
    function handleClick() {
        console.log('单击事件触发了')
    }

return (
        <div onClick={handleClick}>我是一个app函数组件</div>
    )
}
```

## 事件对象

- 可以通过事件处理程序的参数获取到事件对象
- React中的事件对象叫做：合成事件（对象）
- 合成事件：兼容所有浏览器，无需担心跨浏览器兼容问题

```JavaScript
function App() {
    function handleClick(e) {
        // 阻止浏览器默认行为
        e.preventDefault()
        // 获取当前的这个标签   e.target
        console.log('事件对象', e.target)
    }

return (
        <a onClick={handleClick} href="http://www.baidu.com">放行，我不会跳转</a>
    )
}
```

## 有状态组件，无状态组件

- 函数组件—无状态组件
- 类组件—有状态组件

函数组件只负责数据的展示（静）

类组件有自己的状态，负责更新UI，让页面“动”起来

### state的基本使用

- 状态（state）即数据，是组件内部的私有数据，只能在组件内部使用
- state的值是对象，表示一个组件内有多个数据

```JavaScript
class Count extends React.Component {
    // constructor() {
    //     super();
    //     // 初始化state
    //     this.state = {
    //         count: 0
    //     }
    // }
    // 简化语法初始化
    state = {
        count: 0,
    }
    render() {
        return (
            <div>
                <span>计数器：</span>
            </div>
        )
    }
}
```

读取状态

```JavaScript
<span>计数器：{this.state.count}</span>
```

### setState修改状态

- 状态是可变的
- 语法：this.setState({要修改的数据})
- 注意：不要直接修改state中的值，这是错误的！！！

```JavaScript
class Count extends React.Component {
    state = {
        count: 0,
    }
    render() {
        return (
            <div>
                <p>计数器：{this.state.count}</p>
                <button onClick={() => {
                    this.setState({
                        count: this.state.count + 1
                    })
                }}> +1
                </button>
            </div>
        )
    }
}

```

思想：数据驱动视图

### 从jsx中抽离事件处理程序

如果是抽离出单独的方法，在调用方法的时候，在函数体中this就不再是原来那个this，而是undefined

```JavaScript
<button onClick={this.onIncrement}> +1</button>
// 这样会报错
```

正确的写法是使用箭头函数去调用要执行的方法

```JavaScript
<button onClick={() => this.onIncrement()}> +1</button>
```

```JavaScript

class Count extends React.Component {
    state = {
        count: 0,
    }

onIncrement() {
        this.setState({
            count: this.state.count + 1
        })
    }

render() {
        return (
            <div>
                <p>计数器：{this.state.count}</p>
                <button onClick={() => this.onIncrement()}> +1
                </button>
            </div>
        )
    }
}
```

### 事件绑定this指向

```JavaScript
render() {
    return (
        <div>
            <p>计数器：{this.state.count}</p>
            <button onClick={() => this.onIncrement()}> +1
            </button>
        </div>
    )
}
```

在button中的this是指向的是render这个实例

```JavaScript
onIncrement() {
    this.setState({
        count: this.state.count + 1
    })
}
```

在`onIncrement`方法中的this就是button中的this，也就是render

#### 箭头函数

- 利用箭头函数自身不绑定this的特点
- render()方法中的this为组件实例，可以获取到setState()

#### 使用bind绑定this

- 利用ES5中的bind方法，将事件处理程序中的this与组件实例绑定到一起

```JavaScript
class Count extends React.Component {
    state = {
        count: 0,
    }

constructor() {
        super();
        this.onIncrement = this.onIncrement.bind(this)
    }

onIncrement() {
        this.setState({
            count: this.state.count + 1
        })
    }

render() {
        return (
            <div>
                <p>计数器：{this.state.count}</p>
                <button onClick={this.onIncrement}> +1</button>
                {/*<button onClick={() => this.onIncrement()}> +1</button>*/}
            </div>
        )
    }
}
```

#### class的实例方法（推荐）

```JavaScript
onIncrement = () => {
    this.setState({
        count: this.state.count + 1
    })
}
```

总结：

1. class的实例方法（推荐）
2. 箭头函数
3. bind

## 表单处理

受控组件与非受控组件

### 受控组件

- HTML中的表单元素是可输入的，也就是有自己的可变状态
- 而react的可变状态通常是保存在state中，并且只能通过setState()方法来修改
- react将表单元素值value绑定到一起，由state的值来控制表单元素的值
- 受控组件，其值受到react控制的表单元素

示例：

1. 文本框，富文本框，下拉框
2. 复选框

```JavaScript
class Txt extends React.Component {
    state = {
        txt: '',
        content: '',
        city: 'bj',
        isChecked: false,
    }
    // 处理文本框值变化
    handleChange = (e) => {
        this.setState({
            txt: e.target.value
        })
    }
    // 处理富文本框的值变化
    handleContent = (e) => {
        this.setState({
            content: e.target.value
        })
    }
    // 处理下拉框值变化
    handleCity = (e) => {
        this.setState({
            city: e.target.value
        })
    }
    // 复选框发送变化
    handleCheck = (e) => {
        this.setState({
            isChecked: e.target.checked
        })
    }

render() {
        return (
            <div>
                {/*文本框*/}
                <div>
                    <input type="text" value={this.state.txt} onChange={this.handleChange}/>
                </div>
                {/*富文本框*/}
                <div>
                    <textarea value={this.state.content} onChange={this.handleContent}></textarea>
                </div>
                {/*下拉框*/}
                <div>
                    <select value={this.state.city} onChange={this.handleCity}>
                        <option value="sh">上海</option>
                        <option value="bj">北京</option>
                        <option value="cd">成都</option>
                        <option value="cs">长沙</option>
                    </select>
                </div>
                {/*复选框*/}
                <div>
                    <input type="checkbox" checked={this.state.isChecked} onChange={this.handleCheck}/>
                </div>
            </div>
        );
    }
}

const title = (
    <div>
        <Txt/>
    </div>

)
```

注意：

输入框，富文本框，下拉框都是操作value属性值

复选框操作checked属性

### 多表单元素优化

- 给表单元素添加name属性，名称与state相同
- 根据表单元素类型获取对应值
- 在change事件处理程序中通过 [ name ] 来修改对应的state

```JavaScript
class Txt extends React.Component {
    state = {
        txt: '',
        content: '',
        city: 'bj',
        isChecked: false,
    }
    // 统一的变化函数
    handleForm = (e) => {
        // 获取当前dom对象
        const target = e.target
        //根据类型获取值
        const value = target.type === 'checkbox' ? target.checked : target.value
        // 获取name
        const name = target.name
        // 设置属性
        this.setState({
            [name]: value
        })
    }

render() {
        return (
            <div>
                {/*文本框*/}
                <div>
                    <input type="text" name="txt" value={this.state.txt} onChange={this.handleForm}/>
                </div>
                {/*富文本框*/}
                <div>
                    <textarea name="content" value={this.state.content} onChange={this.handleForm}></textarea>
                </div>
                {/*下拉框*/}
                <div>
                    <select name="city" value={this.state.city} onChange={this.handleForm}>
                        <option value="sh">上海</option>
                        <option value="bj">北京</option>
                        <option value="cd">成都</option>
                        <option value="cs">长沙</option>
                    </select>
                </div>
                {/*复选框*/}
                <div>
                    <input name="isChecked" type="checkbox" checked={this.state.isChecked} onChange={this.handleForm}/>
                </div>
            </div>
        );
    }
}

const title = (
    <div>
        <Txt/>
    </div>

)
```

### 非受控组件

- 说明：借助与ref，使用原生DOM方式获取表单元素值
- ref的作用：获取DOM或组件

具体步骤

1. 调用React.createRef()方法创建一个ref对象

```JavaScript
this.txtRef = React.createRef()
```
1. 将创建好的ref对象添加到文本框中

```JavaScript
<input type="text" ref={this.txtRef}/>
```
1. 通过ref对象获取到文本框的值

```JavaScript
this.txtRef.current.value
```

示例：

```JavaScript
class NotTxt extends React.Component {
    constructor() {
        super();
        // 创建ref
        this.txtRef = React.createRef()
    }

getTxt = () => {
        console.log('文本框值为：', this.txtRef.current.value)
    }

render() {
        return (
            <div>
                <input type="text" ref={this.txtRef}/>
                <button onClick={this.getTxt}>获取文本框中的值</button>
            </div>
        )
    }
}
```

## 案例：评论列表

![](http://python.fengfengzhidao.icu/img/20211206143959.png)

基本结构

```JavaScript
class Comment extends React.Component {
    render() {
        return (
            <div className="comment">
                {/*评论人*/}
                <div>
                    <input className="user" type="text" placeholder="请输入评论人"/>
                </div>
                {/*评论内容*/}
                <div>
                    <textarea className="comment_content" rows="4" placeholder="请输入评论内容"></textarea>
                </div>
                {/*按钮*/}
                <div>
                    <button>提交评论</button>
                </div>
                {/*评论列表*/}
                <div>
                    <ul>
                        <li>
                            <h4>枫枫</h4>
                            <p>沙发</p>
                        </li>
                    </ul>
                </div>
            </div>
        )
    }
}

const title = (
    <div>
        <Comment/>
    </div>
)
```

### 渲染评论列表

```JavaScript
state = {
    comment_list: [
        {id: 1, name: '枫枫', content: '沙发！'},
        {id: 2, name: 'jack', content: '板凳！'},
        {id: 3, name: 'rose', content: '楼主好人！'},
        {id: 4, name: 'tom', content: '滴~好人卡！'},
    ]
}

...
<ul>
    {this.state.comment_list.map(item => <li key={item.id} >
        <h4>{item.name}</h4>
        <p>{item.content}</p>
    </li>)}
</ul>

```

渲染暂无评论

如果没有评论就显示暂无评论

- 判断列表长度是否为0

```JavaScript
{/*根据条件决定要渲染的内容*/}
{
    this.state.comment_list.length === 0 ? (
        <div className="no_comment_list">暂无评论，快去评论吧！</div>
    ) : (
        <div>
            <ul>
                {this.state.comment_list.map(item => <li key={item.id}>
                    <h4>{item.name}</h4>
                    <p>{item.content}</p>
                </li>)}
            </ul>
        </div>
    )
}
```

优化：

将其封装为一个函数

```JavaScript
renderList() {
    const {comment_list} = this.state
    if (comment_list === 0) {
        return <div className="no_comment_list">暂无评论，快去评论吧！</div>
    }
    return (
        <div>
            <ul>
                {comment_list.map(item => <li key={item.id}>
                    <h4>{item.name}</h4>
                    <p>{item.content}</p>
                </li>)}
            </ul>
        </div>
    )
}
...

{/*评论列表*/}
{this.renderList()}

```

### 获取评论信息

handleForm = (e) => {
    const {name, value} = e.target

this.setState({
        [name]: value
    })
}

render() {

const {userName, UserComment} = this.state
    return (
        <div className="comment">
            {/*评论人*/}
            <div>
                <input
                    className="user"
                    type="text"
                    value={userName}
                    name="userName"
                    onChange={this.handleForm}
                    placeholder="请输入评论人"/>
            </div>
            {/*评论内容*/}
            <div>
                <textarea
                    className="comment_content"
                    rows="4" value={UserComment}
                    name="UserComment"
                    onChange={this.handleForm}
                    placeholder="请输入评论内容"></textarea>
            </div>
            {/*按钮*/}
            <div>
                <button>提交评论</button>
            </div>
            {/*评论列表*/}
            {this.renderList()}
        </div>
    )
}
```

### 发表评论

```JavaScript
// 发表评论
addComment = (e) => {
    const {comment_list, userName, userComment} = this.state
    const new_comments = [
        {
            id: Math.random(),
            name: userName,
            content: userComment,
        }, ...comment_list]
    this.setState({
        comment_list: new_comments
    })
}

...

```

优化

```JavaScript
// 发表评论
addComment = (e) => {
    const {comment_list, userName, userComment} = this.state
    // 非空校验
    if (userName.trim() === '' || userComment.trim() === ''){
        alert('请输入内容')
        return
    }
    const new_comments = [
        {
            id: Math.random(),
            name: userName,
            content: userComment,
        }, ...comment_list]
    this.setState({
        comment_list: new_comments,
        // 清空输入的内容
        userName: '',
        userComment: ''
    })
}
```

# 组件通信

## 组件的props

- 作用：接收传递给组件的数据
- 传递数据：给组件添加属性
- 接收数据

函数组件使用props接收数据

```JavaScript
// 接收数据
function FunProp(props) {
    console.log(props)  // {name: 'jack', age: 19}
    return (
        <div>接收到数据： {props.name}</div>
    )
}

// 传递数据
const title = (
    <div>
        <FunProp name="jack" age={19}/>
    </div>
)
```

类组件通过this.props接收数据

```JavaScript
class ClassProp extends React.Component {
    render() {
        return (
            <div>接收到数据： {this.props.name}, {this.props.age}</div>
        )
    }
}

const title = (
    <div>
        <ClassProp name="jack" age={19}/>
    </div>
)
```

特点：

1. 可以给组件传递任意类型的数据（字符串，整数，对象，甚至是函数）

```JavaScript
<ClassProp
    name="jack"
    age={19}
    colors={["red", 'green', 'blue']}
    fn={()=>console.log('这是一个函数')}
    tag={<p>这是一个p标签</p>}
/>
```
1. props是只读对象，只能读取属性的值，不能修改属性的值
2. 在使用类组件时，如果写了构造函数，应该将props传递给super()，否则，无法在构造函数中获取到props！

```JavaScript
constructor(props) {
    super(props);
}
```

在写`constructor`的时候，推荐将props传递给super

## 组件通信的三种方式

1. 父组件 → 子组件
2. 子组件 → 父组件
3. 兄弟组件

### 父传子

1. 父组件提供要传递的state数据
2. 给子组件标签添加属性，值为state中的数据
3. 子组件中通过props接收父组件中传递的数据

```JavaScript
// 子组件
class Child extends React.Component {
    render() {
        return (
            <div>
                我是一个子组件，这是父组件的值：{this.props.name}
            </div>
        )
    }
}
// 父组件
class Parent extends React.Component {
    state = {
        lastName: '王'
    }
    render() {
        return (
            <div>
                <Child name={this.state.lastName}/>
            </div>
        )
    }
}
const title = (
    <div>
        <Parent/>
    </div>
)
```

### 子传父

思路：利用回调函数，父组件提供回调，子组件调用，将要传递的数据作为回调函数的参数

```JavaScript
const Child = (props) => {
    function handleClick() {
        // 调用父组件传递来的回调函数
        props.getMsg('子组件的数据')
    }

return (
        <div>
            我是一个子组件
            <button onClick={handleClick}>点我，给父组件发送数据</button>
        </div>
    )
}

const Parent = () => {
    // 给子组件传递一个回调函数，由子组件调用
    function getMsg(msg) {
        console.log('接收到子组件的数据')
    }

return (
        <div>
            <Child getMsg={getMsg}/>
        </div>
    )
}

```

如果要将子组件传给父组件的数据展示在页面中，只能通过类组件去设置一个属性

注意：回调函数this指向问题

### 兄弟组件

- 将共享状态提升到最近的公共父组件中，由公共父组件管理这个状态
- 思想：状态提升
- 公共父组件职责：1. 提供共享状态  2. 提供操作共享状态的方法
- 要通讯的子组件只需要通过props接收状态和操作状态的方法

```JavaScript
// 父组件
class Counter extends React.Component {
    // 在父组件中提供共享状态
    state = {
        count: 0
    }
    // 提供修改状态的方法
    onSetCount = () => {
        this.setState({
            count: this.state.count + 1
        })
    }

render() {
        return (
            <div>
                {/*将状态传递给子组件*/}
                <Child1 count={this.state.count}/>
                {/*将修改状态的方法传递给子组件*/}
                <Child2 setCount={this.onSetCount}/>
            </div>
        )
    }
}

const Child1 = (props) => {
    // 接收父组件传递的数据，展示在页面上
    return <h2>计数器：{props.count}</h2>
}

const Child2 = (props) => {
    // 子组件调用父组件传来的方法
    return <button onClick={() => props.setCount()}> +1</button>
}

const title = (
    <Counter/>
)
```

### context的基本使用

多层嵌套的组件关系，如何传递呢？

原来：使用props一层一层组件向下传递

![](http://python.fengfengzhidao.icu/img/20211206163943.png)

作用：跨组件传递数据（例如：主题，语言）

使用步骤：

1. 调用React.createContext()创建Provider(提供数据)和Consumer（消费数据）两个组件
2. 使用Provider组件作为父节点
3. 设置value属性，表示要传递的数据

```JavaScript
<Provider value="pink">
    ...
</Provider>
```
1. 调用Consumer组件接收数据

```JavaScript
{/*在Consumer组件中接收Provider传递来的数据*/}
<Consumer>
    {
        data => <span>我是span -- {data}</span>
    }
</Consumer>

```

```JavaScript
// 创建context

const {Provider, Consumer} = React.createContext()

// 最外层的组件
class App extends React.Component {
    render() {
        return (
            // 使用Provider作为父组件
            <Provider value="pink">
                <div className="app">
                    <Node/>
                </div>
            </Provider>

)
    }
}

const Node = () => {
    return (
        <div className="node">
            <SubNode/>
        </div>
    )
}

const SubNode = () => {
    return (
        <div className="subNode">
            <Child/>
        </div>
    )
}
// 最里层的组件
const Child = () => {
    return (
        <div className="child">
            <div>
                {/*在Consumer组件中接收Provider传递来的数据*/}
                <Consumer>
                    {
                        data => <span>我是span -- {data}</span>
                    }
                </Consumer>
            </div>
        </div>)

}

const title = (
    <App/>
)
```

## props深入

### children属性

- children属性：表示组件标签的子节点。当组件标签有子节点时，props就会有该属性
- 与props属性一样，它的值可以是任意的数据类型，函数，甚至是jsx

```JavaScript
const App = props => {
    return (
        <div>
            <h1>组件标签的子节点：</h1>
            <p>{props.children}</p>
        </div>
    )
}

const title = (
    // 会将我是子节点传递给props.children
    <App>我是子节点</App>
)
```

children也可以是jsx

```JavaScript
const Test = () => <button> 我是button组件 </button>

const App = props => {
    return (
        <div>
            <h1>组件标签的子节点：</h1>
            <p>{props.children}</p>
        </div>
    )
}

const title = (
    // 会将我是子节点传递给props.children
    <App>
        {/*<p>我是子组件</p>*/}
        <Test/>
    </App>
)
```

### props校验

- 组件传递的时候，可以规定传入的数据类型
- 如果不是规定的数据类型，那么就抛出对应的异常

```JavaScript
npm i prop-types
```

使用

```JavaScript
import PropTypes from 'prop-types'

function App(props) {
    return (
        <div>Hi, {props.colors}</div>
    )
}

// 添加props校验
App.propTypes = {
    colors: PropTypes.array,
}

const title = (
    <div>
        <App colors="red"/>
        <App colors={['red', 'blue']}/>
    </div>

)

```

![](http://python.fengfengzhidao.icu/img/20211206172216.png)

#### 约束规则

1. 常见类型：array，bool，func，number，object，string
2. React元素类型：element
3. 必填项：isRequired
4. 特定结构的对象 .shape( { } )

### props的默认值

上一篇：枫枫知道--Vue全系列课程下一篇：Vue项目部署【前后端分离部署】

你觉得文章怎么样

苦酒

### 你好啊

10个月前
点赞（0）回复（0）
苦酒

<script>alert</script>

10个月前
点赞（0）回复（0）
DkZcm

测试

1年前
点赞（0）回复（0）
DkZcm

测试

1年前
点赞（0）回复（0）

枫枫知道个人博客

枫枫知道--React全系列课程

苦酒

苦酒

DkZcm

DkZcm