组件通讯的介绍
组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据,在组件过程中,我们要将一个完整的功能拆分成多个组件,以更好的完成整个应用的功能。而在这个过程中,多个组件之间不可避免的要共享某些数据。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯
组件props
组件是封闭的,要接收外部数据应该通过props来实现
props作用:接收传递给组件的数据
传递数据:给组件标签添加属性
接收数据:行数组件通过参数props接收数据,类组件通过this.props接收数据
特点一:可以传递任意类型(默认是字符串,如需传递别的类型需要加上 {})
特点二:props是只读的对象,只能读取,无法改变
注意:使用类组件时,如果写了构造函数,应该将props传递给super()否则,无法在构造函数中获取到props
// 在父组件传的值
<InfoClass name="张三"></InfoClass>
<InfoFunction name="李四"></InfoFunction>
// 类组件
class Info_Class extends React.Component {
// 推荐使用props作为constructor的参数!!
constructor(props) {
super(props)
}
render () {
return (
<div>
{this.props.name}
</div>
)
}
}
// 函数组件
function Info_Class (props) {
return (
<div>
{props.name}
</div>
)
}
组件通讯的三种方式
父组件传递数据给子组件
1.父组件提供state数据
2.给子组件标签添加属性,值为state中的数据
3.子组件通过props接收父组件中传递的数据
子组件传递数据给父组件
思路:利用回调函数,父组件提供回调,子组件调用,将要传递的数据作为回调函数的参数
1.父组件提供一个回调函数(用于接收数据)
2.将该函数作为属性的值,传递给子组件
3.子组件通过props调用回调函数
4.将子组件的数据作为参数传递给回调函数
兄弟组件
将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态
思想:状态的提升
公共父组件职责:1.提供共享状态 2.提供操作共享状态的方法
要通讯的子组件只需要通过props接收状态或者操作状态的方法
Context
作用:跨组件传递数据
注意 想要传递必须是同一个createContext不然不能传递,传递必须在标签上加一个value
class Context extends React.Component {
render () {
return (
<themeContext.Provider value={theme}>
<div>
<Context1></Context1>
</div>
</themeContext.Provider>
)
}
}
接收的方式
<themeContext.Consumer>{data => console.log(data)}</themeContext.Consumer>
props深入
children 属性
表示组件标签的子节点。当组件标签有子节点时,props就会有该属性。
children属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)
// 父组件
class Context extends React.Component {
render () {
return (
<div>
<Context1>
<p>123</p>
</Context1>
</div>
)
}
}
// 组件就能获取到 <p>123</p> 子标签
class Context extends React.Component {
constructor(props) {
super(props)
console.log(props.children )
}
render () {
console.log(this.props.children )
return (
<div>
<Context2>
</Context2>
</div>
)
}
}
props 校验
作用:捕获使用组件时因为props导致的错误,给出明确的错误提示,增加组件的健壮性
操作:
1、安装prop-types(yarn add prop-types)
2、导入prop-types包
3、使用
4、约束规则
(array、bool、func、number、object、string)约束类型
更多类型校验: https://zh-hans.reactjs.org/docs/typechecking-with-proptypes.html
// 2、导入prop-types
import PropTypes from "prop-types"
function Child (props) {
return (
<div>
</div>
)
}
3、使用
Child.propTypes = {
list: PropTypes.array
}
props默认值
function Child (props) {
console.log(props)
return (
<div>
</div>
)
}
Child.defaultProps = {
page: 10
}