• 售前

  • 售后

热门帖子
入门百科

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

[复制链接]
内托体头 显示全部楼层 发表于 2021-10-26 14:02:38 |阅读模式 打印 上一主题 下一主题
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
  1. import React from 'react'
  2. const {Provider,Consumer} = React.createContext('default')
  3. export default class ContextDemo extends React.Component {
  4.     state={
  5.         newContext:'createContext'
  6.     }
  7.   render() {
  8.       const {newContext} = this.state
  9.     return (
  10.         <Provider value={newContext}>
  11.             <div>
  12.                 <label>childContent</label>
  13.                 <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/>
  14.             </div>
  15.             <Son />
  16.         </Provider>
  17.     )
  18.   }
  19. }
  20. class Son extends React.Component{
  21.     render(){
  22.         return <Consumer>
  23.             {
  24.                 (name)=>
  25.                     <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}>
  26.                         <p>子组件获取到的内容:{name}</p>
  27.                         <Grandson />
  28.                     </div>
  29.                
  30.             }
  31.         
  32.         </Consumer>
  33.     }
  34. }
  35. class Grandson extends React.Component{
  36.     render(){
  37.         return <Consumer>
  38.             {
  39.                 (name)=>
  40.                     <div style={{border:'1px solid red',width:'60%',margin:'20px auto',textAlign:'center'}}>
  41.                         <p>孙子组件获取到的内容:{name}</p>
  42.                     </div>
  43.                
  44.             }
  45.         
  46.         </Consumer>
  47.     }
  48. }
复制代码
老项目的方式也先容一下,使用prop-types
  1. import React from 'react'
  2. import PropTypes from 'prop-types'
  3. class ContextDemo extends React.Component {
  4.     // getChildContext
  5.     state={
  6.         newContext:'createContext'
  7.     }
  8.     getChildContext(){
  9.         return {value:this.state.newContext}
  10.     }
  11.   render() {
  12.       const {newContext} = this.state
  13.     return (
  14.             <div>
  15.                 <div>
  16.                     <label>childContent</label>
  17.                     <input type="text" value={newContext} onChange={e=>this.setState({newContext:e.target.value})}/>
  18.                 </div>
  19.                 <Son />
  20.             </div>
  21.     )
  22.   }
  23. }
  24. class Son extends React.Component{
  25.     render(){
  26.         return <div>
  27.             <p>children:{this.context.value}</p>
  28.         </div>
  29.     }
  30. }
  31. Son.contextTypes = {
  32.     value:PropTypes.string
  33. }
  34. ContextDemo.childContextTypes = {
  35.     value:PropTypes.string
  36. }
  37. export default () =>
  38.   <ContextDemo >
  39.   
  40.   </ContextDemo>
复制代码
ref
  1. import React from 'react'
  2. // 函数组件也想拿到dom 通过 ref
  3. const TargetFunction = React.forwardRef((props,ref)=>(
  4.     <input type="text" ref={ref}/>
  5. ))
  6. export default class FrodWordRefDemo extends React.Component {
  7.   constructor() {
  8.     super()
  9.     this.ref = React.createRef()
  10.   }
  11.   componentDidMount() {
  12.     this.ref.current.value = 'ref get input'
  13.   }
  14.   render() {
  15.     return <TargetFunction ref={this.ref}>
  16.     </TargetFunction>
  17.   }
  18. }
复制代码
pubsub-js
  1. import React from 'react'
  2. import PubSub from 'pubsub-js'
  3. export default class Bro extends React.Component{
  4.     state = {
  5.         value:''
  6.     }
  7.     render(){
  8.         const {value} = this.state
  9.         PubSub.subscribe('SOS',(res,data)=>{
  10.             this.setState({
  11.                 value:data
  12.             })
  13.         })
  14.         return (
  15.             <div>
  16.                 我接受到了
  17.                 <h1>{value}</h1>
  18.             </div>
  19.         )
  20.     }
  21. }
复制代码
  1. import React from 'react'
  2. import PubSub from 'pubsub-js'
  3. export default class Children extends React.Component{
  4.     state = {
  5.         value:''
  6.     }
  7.     handelChange = (e) =>{
  8.         this.setState({
  9.             value:e.target.value
  10.         })
  11.     }
  12.     send = () =>{
  13.         const {value} = this.state
  14.         PubSub.publish('SOS',value)
  15.     }
  16.     render(){
  17.         const {value} = this.state
  18.         return (
  19.             <div>
  20.                 <input type="text" value={value} onChange={this.handelChange}/>
  21.                 <button onClick={this.send}>发送</button>
  22.             </div>
  23.         )
  24.     }
  25. }
复制代码
到此这篇关于React 非父子组件传参的实例代码的文章就先容到这了,更多相干React 非父子组件传参内容请搜索脚本之家从前的文章或继承欣赏下面的相干文章希望各人以后多多支持脚本之家!

帖子地址: 

回复

使用道具 举报

分享
推广
火星云矿 | 预约S19Pro,享500抵1000!
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则

草根技术分享(草根吧)是全球知名中文IT技术交流平台,创建于2021年,包含原创博客、精品问答、职业培训、技术社区、资源下载等产品服务,提供原创、优质、完整内容的专业IT技术开发社区。
  • 官方手机版

  • 微信公众号

  • 商务合作