一.props用法
-
组件是封闭的,要接收外部数据应该通过props来实现
-
props的作用:接收传递给组件的数据
-
传递数据:给组件标签添加属性
-
接收数据:函数组件通过参数props接收数据,类组件通过this.props接收数据
函数组件props用法:
//子组件
function Hello(props) { console.log(props) return ( <div>接收到数据:{props.name}</div> ) }
//父组件
<Hello name="jack" age={19} />
类组件props用法:
//子组件 class Hello extends React.Component { render() { return ( <div>接收到的数据:{this.props.age}</div> ) } }
//父组件
<Hello name="jack" age={19} />
props的特点:
-
可以给组件传递任意类型的数据
-
props是只读的,不允许修改props的数据,单向数据流
-
注意:在类组件中使用的时候,需要把props传递给super(),否则构造函数无法获取到props
class Hello extends React.Component { constructor(props) { // 推荐将props传递给父类构造函数 super(props) } render() { return <div>接收到的数据:{this.props.age}</div> } }
props组件深入:
1.children属性:
描述:表示该组件的子节点,只要组件有子节点,props就有该属性。
注意:children 属性与普通的props一样,值可以是任意值(文本、React元素、组件,甚至是函数)
function Hello(props) { return ( <div> 该组件的子节点:{props.children} </div> ) } <Hello>我是子节点</Hello>
2.props校验
- 目的:校验接收的props的数据类型,增加组件的健壮性
- 对于组件来说,props是外来的,无法保证组件使用者传入什么格式的数据
- 如果传入的数据格式不对,可能会导致组件内部报错。组件的使用者不能很明确的知道错误的原因。
- props校验允许在创建组件的时候,就约定props的格式、类型等
使用步骤:
-
安装包 prop-types (yarn add prop-types / npm i props-types)
-
导入 prop-types 包
-
使用组件名.propTypes = {} 来给组件的props添加校验规则
-
校验规则通过 PropTypes 对象来指定
import PropTypes from 'prop-types' function App(props) { return ( <h1>Hi, {props.colors}</h1> ) } App.propTypes = { // 约定colors属性为array类型 // 如果类型不对,则报出明确错误,便于分析错误原因 colors: PropTypes.array }
约束规则:
-
常见类型:array、bool、func、number、object、string
-
React元素类型:element
-
必填项:isRequired
-
特定结构的对象:shape({ })
3.props默认值
给 props 设置默认值,在未传入 props 时生效
function App(props) { return ( <div> 此处展示props的默认值:{props.pageSize} </div> ) } // 设置默认值 App.defaultProps = { pageSize: 10 } // 不传入pageSize属性 <App />
二.组件通讯
组件是独立且封闭的单元,默认情况下,只能使用组件自己的数据。在组件化过程中,我们将一个完整的功能 拆分成多个组件,以更好的完成整个应用的功能。而在这个过程中,多个组件之间不可避免的要共享某些数据 。为了实现这些功能,就需要打破组件的独立封闭性,让其与外界沟通。这个过程就是组件通讯。2.1组件通讯三种方式
-
父传子
-
子传父
-
非父子
2.2.1 父传子
-
父组件提供要传递的state数据
-
给子组件标签添加属性,值为 state 中的数据
-
子组件中通过 props 接收父组件中传递的数据
//父组件提供数据并且传递给子组件 class Parent extends React.Component { state = { lastName: '王' } render() { return ( <div> 传递数据给子组件:<Child name={this.state.lastName} /> </div> ) } } //子组件接收数据 function Child(props) { return <div>子组件接收到数据:{props.name}</div> }
2.2.2 子传父
-
父组件提供一个回调函数(用于接收数据)
-
将该函数作为属性的值,传递给子组件
-
子组件通过 props 调用回调函数
-
将子组件的数据作为参数传递给回调函数\
// 父组件提供函数并且传递给子组件 class Parent extends React.Component { getChildMsg = (msg) => { console.log('接收到子组件数据', msg) } render() { return ( <div> 子组件:<Child getMsg={this.getChildMsg} /> </div> ) } } //子组件接收函数并且调用 class Child extends React.Component { state = { childMsg: 'React' } handleClick = () => { this.props.getMsg(this.state.childMsg) } return ( <button onClick={this.handleClick}>点我,给父组件传递数据</button> ) }
2.2.3 非父子
-
将共享状态提升到最近的公共父组件中,由公共父组件管理这个状态
-
思想:状态提升
-
公共父组件职责:
-
提供共享状态
-
提供操作共享状态的方法
-
-
要通讯的子组件只需通过 props 接收状态或操作状态的方法
2.2 跨组件通讯-context
实现步骤:
1.调用 React. createContext() 创建 Provider(提供数据) 和 Consumer(消费数据) 两个组件。
const { Provider, Consumer } = React.createContext()
2.使用 Provider 组件作为父节点。
<Provider> <div className="App"> <Child1 /> </div> </Provider>
3.设置 value 属性,表示要传递的数据。
<Provider value="pink">
4.调用 Consumer 组件接收数据。
<Consumer> {data => <span>data参数表示接收到的数据 -- {data}</span>} </Consumer>
总结:
-
如果两个组件是远方亲戚(比如,嵌套多层)可以使用Context实现组件通讯
-
Context提供了两个组件:Provider 和 Consumer
-
Provider组件:用来提供数据
-
Consumer组件:用来消费数据
标签:return,基础,React,props,组件,接收,数据 From: https://www.cnblogs.com/lijingru/p/16875192.html