React进阶组件
组件的props、组件通信
组件的props
组件是封闭的，要接收外部数据应该通过props来实现。
- props的作用：接收传递给组件的数据
- 传递数据：给组件标签添加属性
- 接受数据：函数组件通过参数props接收数据，类组件通过this.props接收数据
// 函数组件
function Hello(props) {
return (
<div>接收到的数据： {props.name}</div>
)
}
// 类组件
class Hello extends React.Component {
render() {
return (
<div>接收到的数据：{this.props.name}</div>
)
}
}
class App extends React.Component {
render() {
return (
<Hello name="xiaowang" age={18}/>
)
}
}
- props是只读的对象，只能读取属性的值，无法修改对象
- 使用类组件的时候，如果写了构造函数，应该将props传递给super()，否则，无法再构造函数中获取到props
class Hello extends React.Component {
constructor() {
super()
console.log('props======>', this.props)
}
render() {
return (
<div>接收到的数据：{this.props.name}</div>
)
}
}
class App extends React.Component {
render() {
return (
<Hello name="xiaowang" age={18}/>
)
}
}
image
以上代码，推荐使用:
constructor(props) {
super(props)
console.log('props======>', props)
}
组件通信
- 1, 父传子
- 2，子传父
- 3，兄弟传值
- 4，跨组件传递数据
1，父传子
1，父组件提供要传递的state数据
2，给子组件标签添加属性，值为state中的数据
3，子组件中通过props接收父组件传递的数据
// 父组件
class Parent extends React.Component {
render() {
return (
<div>父组件：<Child name="老王"/></div>
)
}
}
// 父组件也可以直接写要传递的数据
class Parent extends React.Component {
state = {
name: '老王'
}
render() {
return (
<div>父组件：{this.state.name}<Child name={this.state.name}/></div>
)
}
}
// 子组件
const Child = props => {
return (
<div>子组件接收到父组件传递过来的数据： {props.name}</div>
)
}
2，子传父
利用回调函数：父组件提供回调函数，子组件调用，将要传递的数据作为回调函数的参数。同vue一样
// 父组件
class Parent extends React.Component {
// 提供回调函数
state = {
msg: ''
}
getChildMsg = data => {
this.setState({msg: data})
}
render() {
return (
<div>父组件接收到子组件传递过来的数据为：{this.state.msg}<Child getMsg={this.getChildMsg}/></div>
)
}
}
// 子组件
class Child extends React.Component {
handleClick = () => {
// 子组件调用父组件传递过来的回调函数
this.props.getMsg('哈哈哈')
}
render() {
return (
<div>子组件：<button onClick={this.handleClick}>点击给父组件传递数据</button></div>
)
}
}
兄弟通信
思想就是：状态提升
- 将共享的数据(状态)提升到最近的公共父组件，由父组件管理这个状态
- 公共父组件职责：1，提供共享状态 2，提供操作共享状态的方法
- 要通讯的子组件只需通过props接收状态或操作状态的方法
// 父组件
class Parent extends React.Component {
// 父组件提供状态
state = {
message: '父组件的message'
}
// 提供修改状态的方法
changeMsg = () => {
this.setState({
message: this.state.message + '哈哈哈哈哈'
})
}
render() {
return (
<div>
<Child1 msg={this.state.message}/>
<Child2 getMsg={this.changeMsg}/>
</div>
)
}
}
// 子组件1
const Child1 = props => {
return <h1>子组件1: {props.msg}</h1>
}
// 子组件2
const Child2 = props => {
return <h1>子组件2: <button onClick={() => props.getMsg()}>点击</button></h1>
}
4，跨组件传递数据 - Context
使用步骤：1,调用React.createContext()创建Provider(提供数据)和Consumer(消费数据)两个组件
const {Provider, Consumer} = React.createContext()
2，使用 Provider 组件作为父节点
<Provider>
<div>
<Child/>
</div>
</Provider>
3，设置value属性，表示要传递的数据
<Provider value="传递的value值">
4, 调用Consumer组件接收数据
<Consumer>
{data => <span>data参数表示接收到的数据-{data}</span>}
</Consumer>
示例：
class Grandfather extends React.Component{
render() {
return (
<Provider value="祖父组件的value值">
<div>
祖父组件：<Parent/>
</div>
</Provider>
)
}
}
const Parent = props => {
return (
<div>
父组件：<Son/>
</div>
)
}
const Son = props => {
return (
<div>
儿子组件：<Grandson/>
</div>
)
}
const Grandson = props => {
return (
// <Consumer>
// {data => (<div>
// 孙子组件 === 接收到来自祖父传递的数据：{data}
// </div>)}
// </Consumer>
<div>
孙子组件====接收到来自祖父传递来的数据
<Consumer>
{data => <span style={{color: 'red'}}>为：{data}</span>}
</Consumer>
</div>
)
}
image
网友评论