如何使用道具在React组件周围传递数据
道具是组件如何获取其属性的方法。从顶部组件开始,每个子组件都从父组件获取其道具。在功能组件中,道具是传递的全部要素,它们可以通过添加props
作为函数参数:
const BlogPostExcerpt = props => {
return (
<div>
<h1>{props.title}</h1>
<p>{props.description}</p>
</div>
)
}
在类组件中,默认情况下会传递道具。无需添加任何特殊内容,它们可以通过以下方式访问this.props
在Component实例中。
import React, { Component } from 'react'
class BlogPostExcerpt extends Component {
render() {
return (
<div>
<h1>{this.props.title}</h1>
<p>{this.props.description}</p>
</div>
)
}
}
将props传递给子组件是在应用程序中传递值的好方法。组件要么持有数据(具有状态),要么通过其道具接收数据。
在以下情况下会变得复杂:
- 您需要从向下几个级别的子级访问组件的状态(以前的所有子级都需要充当传递对象,即使他们不需要知道状态也很复杂)
- 您需要从完全不相关的组件访问组件的状态。
道具的默认值
如果不需要任何值,则在初始化组件时如果缺少默认值,则需要为其指定默认值。
BlogPostExcerpt.propTypes = {
title: PropTypes.string,
description: PropTypes.string
}
BlogPostExcerpt.defaultProps = {
title: ‘’,
description: ‘’
}
一些工具,例如ESLint能够强制为某些未明确需要的propTypes的Component定义defaultProps。
道具如何传递
初始化组件时,以类似于HTML属性的方式传递道具:
const desc = 'A description'
//...
<BlogPostExcerpt title="A blog post" description={desc} />
我们将标题作为纯字符串传递(可以只要处理字符串!),并将说明作为变量。
孩子们
一个特殊的道具是children
。包含在body
组件的名称,例如:
<BlogPostExcerpt title="A blog post" description="{desc}">
Something
</BlogPostExcerpt>
在这种情况下BlogPostExcerpt
我们可以通过查找来访问“某事”this.props.children
。
虽然道具允许组件从其父对象接收属性,例如被“指示”以打印一些数据,但状态允许组件承担自身的生命,并且独立于周围环境。
免费下载我的反应手册
更多反应教程:
- 一个React简单的应用示例:通过API获取GitHub用户信息
- 用React构建一个简单的计数器
- 用于React开发的VS代码设置
- 如何通过React Router将道具传递给子组件
- 使用Electron和React创建一个应用
- 教程:使用React创建电子表格
- 学习React的路线图
- 了解如何使用Redux
- JSX入门
- 样式化的组件
- Redux Saga简介
- React Router简介
- React简介
- 反应组件
- 虚拟DOM
- 反应事件
- 反应状态
- 反应道具
- 反应片段
- React Context API
- 反应PropTypes
- 反应概念:声明式
- React:如何在点击时显示其他组件
- 如何在React JSX内部循环
- 道具与状态在React中
- 您应该使用jQuery还是React?
- 使用React需要知道多少JavaScript?
- 盖茨比介绍
- 如何在React中引用DOM元素
- React中的单向数据流
- 反应高阶组件
- 反应生命周期事件
- 反应概念:不变性
- 反应概念:纯度
- React钩子简介
- create-react-app简介
- 反应概念:组成
- React:演示组件与容器组件
- React中的代码拆分
- 使用React进行服务器端渲染
- 如何安装React
- React中的CSS
- 在React中使用SASS
- 在React中处理表单
- 反应严格模式
- 反应门户
- 反应渲染道具
- 测试React组件
- 如何在React中将参数传递给事件处理程序
- 如何处理React中的错误
- 如何在JSX中返回多个元素
- React中的条件渲染
- 反应,如何将道具转移到子组件
- 如何在React中获取输入元素的值
- 如何使用useState React钩子
- 如何使用useCallback React钩子
- 如何使用useEffect React钩子
- 如何使用useMemo React钩子
- 如何使用useRef React钩子
- 如何使用useContext React钩子
- 如何使用useReducer React钩子
- 如何将您的React应用程序连接到相同来源的后端
- 到达路由器教程
- 如何使用React Developer Tools
- 如何学习React
- 如何调试React应用程序
- 如何在React中呈现HTML
- 如何修复`dangerouslySetInnerHTML`与React中的错误不匹配
- 我如何解决React登录表单状态和浏览器自动填充的问题
- 如何在本地主机上的React应用程序中配置HTTPS
- 如何修复React中的“渲染其他组件时无法更新组件”错误
- 我可以在条件内使用React挂钩吗?
- 将useState与对象一起使用:如何更新
- 如何使用React和Tailwind在代码块中移动
- React,添加到DOM时将焦点放在React中的一个项目上
- 反应,在doubleclick上编辑文本