react中傳遞參數(shù)的方式有哪些-創(chuàng)新互聯(lián)

這篇文章主要介紹react中傳遞參數(shù)的方式有哪些，文中介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們一定要看完！

創(chuàng)新互聯(lián)公司服務(wù)項(xiàng)目包括始興網(wǎng)站建設(shè)、始興網(wǎng)站制作、始興網(wǎng)頁制作以及始興網(wǎng)絡(luò)營銷策劃等。多年來，我們專注于互聯(lián)網(wǎng)行業(yè)，利用自身積累的技術(shù)優(yōu)勢、行業(yè)經(jīng)驗(yàn)、深度合作伙伴關(guān)系等，向廣大中小型企業(yè)、政府機(jī)構(gòu)等提供互聯(lián)網(wǎng)行業(yè)的解決方案，始興網(wǎng)站推廣取得了明顯的社會(huì)效益與經(jīng)濟(jì)效益。目前，我們服務(wù)的客戶以成都為中心已經(jīng)輻射到始興省份的部分城市，未來相信會(huì)繼續(xù)擴(kuò)大服務(wù)區(qū)域并繼續(xù)獲得客戶的支持與信任！

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

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

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

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

最常見的就是父子組件之間傳遞參數(shù)

父組件往子組件傳值，直接用this.props就可以實(shí)現(xiàn)

父組件中，給需要傳遞數(shù)據(jù)的子組件添加一個(gè)自定義屬性，在子組件中通過this.props就可以獲取到父組件傳遞過去的數(shù)據(jù)

// 父組件 render() {        
    return (                // 使用自定義屬性傳遞需要傳遞的方法或者參數(shù)
                <ShopUi toson={this.state}></ShopUi>            
                   )
    } 

//子組件　//通過this.props.toson就可以獲取到父組件傳遞過來的數(shù)據(jù) 、、如果還需要往孫組件傳遞那么在子組件通過自定義屬性繼續(xù)傳遞就行了
      tograndson={this.props.toson}
、、孫組件通過this.props.tograndson獲取到數(shù)據(jù)

子組件給父組件傳值的話，需要在父組件設(shè)置接收函數(shù)和state，同時(shí)將函數(shù)名通過props傳遞給子組件

也就是給子組件傳入父組件的方法，在子組件進(jìn)行調(diào)用

//孫子組件export default class Grandson extends Component{
    render(){        return (            <div style={{border: "1px solid red",margin: "10px"}}>
　　　　　　　　{this.props.name}：                <select onChange={this.props.handleSelect}>
                    <option value="男">男</option>
                    <option value="女">女</option>
                </select>
            </div>        )
    }
}; 
//子組件export default class Child extends Component{
    render(){        return (            <div style={{border: "1px solid green",margin: "10px"}}>
                {this.props.name}：<input onChange={this.props.handleVal}/>
                <Grandson name="性別" handleSelect={this.props.handleSelect}/>
            </div>        )
    }
}; 
//父組件export default class Parent extends Component{
 
    constructor(props){
        super(props)        this.state={
            username: '',
            sex: ''
        }   
    },
    handleVal(event){        this.setState({username: event.target.value});
    },
    handleSelect(value) {        this.setState({sex: event.target.value});
    },
    render(){        return (            <div style={{border: "1px solid #000",padding: "10px"}}>
                <div>用戶姓名：{this.state.username}</div>
                <div>用戶性別：{this.state.sex}</div>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>        )
    }
}

前一段時(shí)間有人問過我這樣一個(gè)問題，constructor里面的super()是干嘛用的？

總結(jié)一下：

如果要在子類的constructor里使用this，必須調(diào)用父類constructor，否則就拿不到this

那么問題就來了，如何調(diào)用父類的constructor呢？通過super()

如果要在constructor里使用父組件傳遞過來的參數(shù)，必須在調(diào)用父組件super時(shí)，傳遞參數(shù)給父組件的constructor

如果不在constructor里面使用this，或者參數(shù)，就不需要super ；因?yàn)镽eact以及幫你做了this，props的綁定

路由傳參

安裝 npm install react-router-dom --save-dev

定義路由(一般會(huì)放在外面)

 <HashRouter> 
    <Switch> 
        <Route exact path="/" component={Home}/> 
        <Route exact path="/detail" component={Detail}/> 
    </Switch> 
</HashRouter>

當(dāng)頁面跳轉(zhuǎn)時(shí)

<li  onClick={el =>　this.props.history.push({
　　　pathname:'/detail',
    　 state:{id:3}
})}>
</li>

接收通過this.props.history.location可以獲取到傳遞過來的數(shù)據(jù)

路由傳參可能會(huì)有這個(gè)問題，就是只有在路由定義時(shí)掛載的組件中才會(huì)有props里面的location history match

路由上掛載的那個(gè)組件一般都是Container.js，一般我們會(huì)往下分出UI.js組件，在這里面進(jìn)行點(diǎn)擊跳轉(zhuǎn)，UI組件props里沒有l(wèi)ocation history match

需要用到高階組件withRouter

狀態(tài)提升

將多個(gè)組件需要共享的狀態(tài)提升到離他們最近的那個(gè)公共父組件上，然后父組件通過props分發(fā)給子組件

context

當(dāng)某個(gè)組件在自己的context中保存了某個(gè)狀態(tài)，那個(gè)該組件下的所有子孫組件都可以訪問到這個(gè)狀態(tài)，不需要中間組件的傳遞，而這個(gè)組件的父組件是沒辦法訪問的

class Index extends Component {
  static childContextTypes = {
    themeColor: PropTypes.string
  }

  constructor () {
    super()
    this.state = { themeColor: 'red' }
  }

  getChildContext () {
    return { themeColor: this.state.themeColor }
  }

  render () {
    return (
      <div>
        <Header />
        <Main />
      </div>
    )
  }
}
通過getChildContext()將屬性傳遞給所有的子孫組件
提供 context 的組件必須提供 childContextTypes 作為 context 的聲明和驗(yàn)證。

class Title extends Component {
  static contextTypes = {
    themeColor: PropTypes.string
  }

  render () {
    return (
      <h2 style={{ color: this.context.themeColor }}>標(biāo)題</h2>
    )
  }
}
子組件要獲取 context 里面的內(nèi)容的話，就必須寫 contextTypes 來聲明和驗(yàn)證你需要獲取的狀態(tài)的類型，它也是必寫的，如果你不寫就無法獲取 context 里面的狀態(tài)。
Title 想獲取 themeColor，它是一個(gè)字符串，我們就在 contextTypes 里面進(jìn)行聲明。

引入redux

redux為React提供可預(yù)測化的狀態(tài)管理機(jī)制

redux將整個(gè)應(yīng)用狀態(tài)存儲(chǔ)到store,store里保存著一個(gè)state狀態(tài)樹

組件可以派發(fā)(dispatch) 行為 (action) 給store , 而不是直接通知其它組件

其它組件可以通過訂閱store中的狀態(tài)state來刷新自己的視圖

以上是“react中傳遞參數(shù)的方式有哪些”這篇文章的所有內(nèi)容，感謝各位的閱讀！希望分享的內(nèi)容對大家有幫助，更多相關(guān)知識(shí)，歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道！

文章名稱：react中傳遞參數(shù)的方式有哪些-創(chuàng)新互聯(lián)
文章路徑：http://www.bm7419.com/article20/ceshjo.html

成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián)，為您提供做網(wǎng)站、域名注冊、App設(shè)計(jì)、網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站建設(shè)、營銷型網(wǎng)站建設(shè)

聲明：本網(wǎng)站發(fā)布的內(nèi)容（圖片、視頻和文字）以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主，如果涉及侵權(quán)請盡快告知，我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場，如需處理請聯(lián)系客服。電話：028-86922220；郵箱：631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載，或轉(zhuǎn)載時(shí)需注明來源：創(chuàng)新互聯(lián)

猜你還喜歡下面的內(nèi)容