(精华)2020年7月31日 React 非父子组件传参
【摘要】
新版：跨级传参最主要是避免每层赋值，也避免用到dva
import React from 'react'
const {Provider,Consumer} = React.createContext(...
新版：跨级传参最主要是避免每层赋值，也避免用到dva
import React from 'react'
const {Provider,Consumer} = React.createContext('default')
export default class ContextDemo extends React.Component {
state={
newContext:'createContext'
}
render() {
const {newContext} = this.state
return (
<Provider value={newContext}>
<div>
<label>childContent</label>
<input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/>
</div>
<Son />
</Provider>
)
}
}
class Son extends React.Component{
render(){
return <Consumer>
{
(name)=>
<div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}>
<p>子组件获取到的内容:{name}</p>
<Grandson />
</div>
}
</Consumer>
}
}
class Grandson extends React.Component{
render(){
return <Consumer>
{
(name)=>
<div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}>
<p>孙子组件获取到的内容:{name}</p>
</div>
}
</Consumer>
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
- 42
- 43
- 44
- 45
- 46
- 47
- 48
- 49
老项目的方式也介绍一下，利用prop-types
import React from 'react'
import PropTypes from 'prop-types'
class ContextDemo extends React.Component {
// getChildContext
state={
newContext:'createContext'
}
getChildContext(){
return {value:this.state.newContext}
}
render() {
const {newContext} = this.state
return (
<div>
<div>
<label>childContent</label>
<input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/>
</div>
<Son />
</div>
)
}
}
class Son extends React.Component{
render(){
return <div>
<p>children:{this.context.value}</p>
</div>
}
}
Son.contextTypes = {
value:PropTypes.string
}
ContextDemo.childContextTypes = {
value:PropTypes.string
}
export default () =>
<ContextDemo >
</ContextDemo>
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
- 26
- 27
- 28
- 29
- 30
- 31
- 32
- 33
- 34
- 35
- 36
- 37
- 38
- 39
- 40
- 41
ref
import React from 'react'
// 函数组件也想拿到dom 通过 ref
const TargetFunction = React.forwardRef((props,ref)=>(
<input type="text" ref={ref}/>
))
export default class FrodWordRefDemo extends React.Component {
constructor() {
super()
this.ref = React.createRef()
}
componentDidMount() {
this.ref.current.value = 'ref get input'
}
render() {
return <TargetFunction ref={this.ref}>
</TargetFunction>
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
pubsub-js
import React from 'react'
import PubSub from 'pubsub-js'
export default class Bro extends React.Component{
state = {
value:''
}
render(){
const {value} = this.state
PubSub.subscribe('SOS',(res,data)=>{
this.setState({
value:data
})
})
return (
<div>
我接受到了
<h1>{value}</h1>
</div>
)
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
import React from 'react'
import PubSub from 'pubsub-js'
export default class Children extends React.Component{
state = {
value:''
}
handelChange = (e) =>{
this.setState({
value:e.target.value
})
}
send = () =>{
const {value} = this.state
PubSub.publish('SOS',value)
}
render(){
const {value} = this.state
return (
<div>
<input type="text" value={value} onChange={this.handelChange}/>
<button onClick={this.send}>发送</button>
</div>
)
}
}
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
- 11
- 12
- 13
- 14
- 15
- 16
- 17
- 18
- 19
- 20
- 21
- 22
- 23
- 24
- 25
文章来源: codeboy.blog.csdn.net，作者：愚公搬代码，版权归原作者所有，如需转载，请联系作者。
原文链接：codeboy.blog.csdn.net/article/details/107601832
【版权声明】本文为华为云社区用户转载文章，如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）