本文详细介绍了React组件通信的多种方式，包括通过props进行父子通信，子组件如何回传数据给父组件，兄弟组件间的状态提升，以及在多层组件间使用的Context API。重点讨论了props的使用细节，如props的只读性、children属性和prop验证，提供了清晰的代码示例。
组件通信
文章目录
1 组件的props
Props 是组件的配置。
props 由父组件传递给子组件，并且就子组件而言，props 是不可变的。
1.1 作用
- 接收传递给组件的数据
1.2 组件标签属性来传递数据
-
通过给组件标签添加属性的方式传递数据。
ReactDOM.render(<Person name="Silly" age={21} />, document.getElementById('root'))
1.3 函数组件和类组件来接收数据
- props是一个对象。
- 函数组件：通过参数props接收数据。
- 类组件：通过this.props接收数据。
// 1、函数组件接收数据---通过参数props接收
import React from 'react';
import ReactDOM from 'react-dom';
const Person = (props) => {
console.log(props);
return (
<div>
<h1>props:{props.name}</h1>
<h1>props:{props.age}</h1>
</div>
)
}
//传递数据name、age
ReactDOM.render(<Person name="Silly" age={21} />, document.getElementById('root'))
// 2、类组件接收数据---通过this.props接收
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component {
render() {
return (
<div>
<h1>类props:{this.props.name}</h1>
<h1>类props:{this.props.age}</h1>
</div>
)
}
}
//传递数据name、age
ReactDOM.render(<Person name="Silly" age={21} />, document.getElementById('root'))
1.4 props特点
-
可以给组件传递任意类型的数据。
- 字符串、数字、函数、对象、数组、标签
<Person name="Silly" age={21} obj={{ id: 11, name: '狗蛋儿', age: 18 }} friends={['SillyGirl','SillyMan','SillyWoman']} fn={()=>{console.log("函数内打印一句话")}} tag={<p>传递过去一个标签内容</p>} /> -
props是一个只读的对象。
-
使用类组件时，若也使用了构造函数，那么应该把props传递给super()，不然无法在构造函数中获取到props。
import React from 'react'; import ReactDOM from 'react-dom'; // 2、类组件接收数据---通过this.props接收 class Person extends React.Component { constructor(props) { super(props) console.log('构造函数内：', props); } render() { console.log('render内：', this.props); return ( <div> <h1>类props:{this.props.name}</h1> <h1>类props:{this.props.age}</h1> </div> ) } } ReactDOM.render( <Person name="Silly" age={21} obj={{ id: 11, name: '狗蛋二', age: 18 }} friends={['SillyGirl', 'SillyMan', 'SillyWoman']} fn={() => { console.log("函数内打印一句话") }} tag={<p>传递过去一个标签内容</p>} />, document.getElementById('root'))
1.5 children属性
- props.children
- children属性表示组件标签的子节点。当组件标签中有子节点时，props就会有一个children属性。
- children属性与普通props一样，值可以是任意类型。
- 字符串、组件、函数、React元素
class Person extends React.Component {
render() {
return (
<div>
<h1>props的children属性：{this.props.children}</h1>
</div>
)
}
}
ReactDOM.render(<Person>我是子节点</Person>, document.getElementById('root'))
1.6 props校验
- props校验：允许在创建组件的时候，指定组件的类型、格式等。
- 作用：捕获相关错误并作出明确提示，增加组建的健壮性。
- 如不符合校验规则，会报错：
Failed prop type:...
- 如不符合校验规则，会报错：
使用步骤：
-
安装
prop-types包。npm install prop-types //或 yarn add prop-types -
导入包。
import PropTypes from 'prop-types' -
使用**组件名.propTypes = {}**给组件添加校验规则。
Person.propTypes = {} -
校验规则通过PropTypes对象来指定。
Person.propTypes = { age:PropTypes.number, name:PropTypes.string }
约束规则：
- 常见类型：number、string、object、func、bool、array、symbol
- React元素类型：element
- 设置校验项为必填项：.isRequired
- 特定结构的对象：PropTypes.shape({ })
Person.propTypes = {
age:PropTypes.number,
name:PropTypes.string,
fn:PropTypes.func.isRequired,
tag:PropTypes.element,
filterLPropTypes.shape({
price:PropTypes.number,
name:PropTypes.string
})
}
2 父传子
- 父组件在state里面提供要传递的数据。
- 在子组件中添加属性，属性值为state里面的待传递值。
- 子组件通过props接收数据。
import React from 'react';
import ReactDOM from 'react-dom';
class Person extends React.Component {
state = {
userName: 'SillyBoy'
}
render() {
return (
<div>
<p>我是父组件</p>
<Child name={this.state.userName} />
</div>
)
}
}
const Child = (props) => {
return (
<div>
<p>我是子组件</p>
<span>接收到数据：{props.name}</span>
</div>
)
}
ReactDOM.render(<Person />, document.getElementById('root'))
3 子传父
子组件向父组件传递数据的思路为：利用回调函数。
父组件提供回调函数；
子组件来调用，将要传递过去的数据作为回调函数的参数。
- 父组件提供用于接收数据的回调函数。
- 父组件将函数作为属性的值，传递给子组件。
- 子组件通过props调用回调函数。
- 子组件将要传递的数据作为参数传递给回调函数。
import React from 'react';
import ReactDOM from 'react-dom';
//父组件
class Person extends React.Component {
state = {
parentMsg: ''
}
getChildMessage = data => {
console.log('父组件函数接收子组件传递的值成功！：', data);
this.setState({
parentMsg: data
})
}
render() {
return (
<div>
<p>我是父组件，接收到：{this.state.parentMsg}</p>
<Child getMsg={this.getChildMessage} />
</div>
)
}
}
//子组件
class Child extends React.Component {
state = {
msg: '你爱我，我爱你，蜜雪冰城甜蜜蜜'
}
handlerClick = () => {
this.props.getMsg(this.state.msg)
}
render() {
return (
<div>
<p>我是子组件，要传递：{this.state.msg}</p>
<button onClick={this.handlerClick}>点击传递给父组件</button>
</div>
)
}
}
ReactDOM.render(<Person />, document.getElementById('root'))
4 兄弟组件之间传递
思想：把共享状态提升到离他们最近的公共父组件内，由父组件来管理此状态。即状态提升。
- 父组件职责：
- 提供共享状态
- 提供操作共享状态的方法
- 子组件：通过props接收或操作状态。
import React from 'react';
import ReactDOM from 'react-dom';
// import Person from './js/Person'
// 公共父组件
class Person extends React.Component {
state = {
allCount: 0
}
addNum = () => {
this.setState({
allCount: this.state.allCount + 1
})
}
render() {
return (
<div>
<Child1 count={this.state.allCount} />
<Child2 clickIt={this.addNum} />
</div>
)
}
}
// 子组件一
class Child1 extends React.Component {
render() {
return (
<h1>数字：{this.props.count}</h1>
)
}
}
// 子组件二
class Child2 extends React.Component {
render() {
return (
<button onClick={() => this.props.clickIt()}>加1</button>
)
}
}
ReactDOM.render(<Person />, document.getElementById('root'))
5 Context
若两个组件之间是属于远房亲戚，是多层的嵌套，适合使用此方法来传递数据
- 作用：跨组件传递数据。
使用步骤：
- 调用React.createContext()创建Provider和Consumer两个组件。
- Provider：提供数据
- Consumer：消费数据
- 使用Provider组件作为父组件。
- 在Provider中设置value属性，表示要传递的值。
- 调用Consumer组件接收数据。
- Consumer里面是一个特殊的语法，一个有返回值的函数。
- 通过回调函数的参数就能拿到传递过来的数据。
const { Provider,Consumer} = React.createContext()
import React from 'react';
import ReactDOM from 'react-dom';
const { Provider, Consumer } = React.createContext()
// 组件之间的父子关系：Person > Father > Son
class Person extends React.Component {
render() {
return (
<Provider value="fa6400">
<div>
<Father />
</div>
</Provider>
)
}
}
class Father extends React.Component {
render() {
return (
<div>
<Son />
</div>
)
}
}
class Son extends React.Component {
render() {
return (
<Consumer>
{data => <span>data参数接收到的数据：{data}</span>}
</Consumer>
)
}
}
ReactDOM.render(<Person />, document.getElementById('root'))
扫一扫
294
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
