React 非父子組件傳參的實例代碼

更新時間：2021年04月22日 14:36:15 作者：愚公搬代碼

React 主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。本文給大家介紹React 非父子組件傳參的相關(guān)知識，感興趣的朋友跟隨一起看看吧

React 是一個用于構(gòu)建用戶界面的 JAVASCRIPT 庫。

React 主要用于構(gòu)建UI，很多人認(rèn)為 React 是 MVC 中的 V（視圖）。

React 起源于 Facebook 的內(nèi)部項目，用來架設(shè) Instagram 的網(wǎng)站，并于 2013 年 5 月開源。

React 擁有較高的性能，代碼邏輯非常簡單，越來越多的人已開始關(guān)注和使用它。

React 特點

1.聲明式設(shè)計 −React采用聲明范式，可以輕松描述應(yīng)用。

2.高效 −React通過對DOM的模擬，最大限度地減少與DOM的交互。

3.靈活 −React可以與已知的庫或框架很好地配合。

4.JSX − JSX 是 JavaScript 語法的擴展。React 開發(fā)不一定使用 JSX ，但我們建議使用它。

5.組件 − 通過 React 構(gòu)建組件，使得代碼更加容易得到復(fù)用，能夠很好的應(yīng)用在大項目的開發(fā)中。

6.單向響應(yīng)的數(shù)據(jù)流 − React 實現(xiàn)了單向響應(yīng)的數(shù)據(jù)流，從而減少了重復(fù)代碼，這也是它為什么比傳統(tǒng)數(shù)據(jù)綁定更簡單。

下面給大家介紹React 非父子組件傳參的實例代碼，具體內(nèi)容如下：

新版：跨級傳參最主要是避免每層賦值，也避免用到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>子組件獲取到的內(nèi)容:{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>孫子組件獲取到的內(nèi)容:{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'

// 函數(shù)組件也想拿到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}>發(fā)送</button>
            </div>
        )
    }
}

到此這篇關(guān)于React 非父子組件傳參的實例代碼的文章就介紹到這了,更多相關(guān)React 非父子組件傳參內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: