React非父子组件传参是怎样,代码是什么

Admin 2022-10-21 群英技术资讯 280 次浏览

这篇文章主要介绍了“React非父子组件传参是怎样,代码是什么”相关知识,内容详细易懂,操作简单快捷,具有一定借鉴价值,相信大家阅读完这篇React非父子组件传参是怎样,代码是什么文章都会有所收获,下面我们一起来看看吧。


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非父子组件传参是怎样,代码是什么”的学习就结束了,希望能够解决大家的疑惑,另外大家动手实践也很重要,对大家加深理解和学习很有帮助。如果想要学习更多的相关知识,欢迎关注群英网络,小编每天都会给大家分享实用的文章!

群英智防CDN,智能加速解决方案

免责声明:本站发布的内容(图片、视频和文字)以原创、转载和分享为主,文章观点不代表本网站立场,如果涉及侵权请联系站长邮箱:mmqy2019@163.com进行举报,并提供相关证据,查实之后,将立刻删除涉嫌侵权内容。

猜你喜欢

成为群英会员,开启智能安全云计算之旅

立即注册
专业资深工程师驻守
7X24小时快速响应
一站式无忧技术支持
免费备案服务
免费拨打  400-678-4567
免费拨打  400-678-4567 免费拨打 400-678-4567 或 0668-2555555
在线客服
微信公众号
返回顶部
返回顶部 返回顶部
在线客服
在线客服