• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

React 非父子组件传参的实例代码

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

React 是一个用于构建用户界面的 JAVASCRIPT 库。

React 主要用于构建UI,很多人认为 React 是 MVC 中的 V(视图)。

React 起源于 Facebook 的内部项目,用来架设 Instagram 的网站,并于 2013 年 5 月开源。

React 拥有较高的性能,代码逻辑非常简单,越来越多的人已开始关注和使用它。

React 特点

1.声明式设计 −React采用声明范式,可以轻松描述应用。

2.高效 −React通过对DOM的模拟,最大限度地减少与DOM的交互。

3.灵活 −React可以与已知的库或框架很好地配合。

4.JSX − JSX 是 JavaScript 语法的扩展。React 开发不一定使用 JSX ,但我们建议使用它。

5.组件 − 通过 React 构建组件,使得代码更加容易得到复用,能够很好的应用在大项目的开发中。

6.单向响应的数据流 − React 实现了单向响应的数据流,从而减少了重复代码,这也是它为什么比传统数据绑定更简单。

下面给大家介绍React 非父子组件传参的实例代码,具体内容如下:

新版:跨级传参最主要是避免每层赋值,也避免用到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>
    }
}

老项目的方式也介绍一下,利用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>

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>
  }
}

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>
        )
    }
}
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>
        )
    }
}

到此这篇关于React 非父子组件传参的实例代码的文章就介绍到这了,更多相关React 非父子组件传参内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
vue实现用户登录切换发布时间:2022-02-05
下一篇:
Vue实现下拉滚动加载数据的示例发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap