React傳遞參數的幾種方式

目錄

父子組件之間傳遞參數

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

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

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

//子組件　
//通過(guò)this.props.toson就可以獲取到父組件傳遞過(guò)來(lái)的數據 

如果還需要往孫組件傳遞那么在子組件通過(guò)自定義屬性繼續傳遞就行了

tograndson={this.props.toson}

孫組件通過(guò)this.props.tograndson獲取到數據

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

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

//孫子組件
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>用戶(hù)姓名：{this.state.username}</div>
                <div>用戶(hù)性別：{this.state.sex}</div>
                <Child name="姓名" handleVal={this.handleVal} handleSelect={this.handleSelect}/>
            </div>
        )
    }
}

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

總結一下：

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

　　那么問(wèn)題就來(lái)了，如何調用父類(lèi)的constructor呢？ 通過(guò)super()

　　如果要在constructor里使用父組件傳遞過(guò)來(lái)的參數，必須在調用父組件super時(shí)，傳遞參數給父組件的constructor

　　如果不在constructor里面使用this，或者參數，就不需要super ； 因為React以及幫你做了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> 

當頁(yè)面跳轉時(shí)

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

接收    通過(guò)this.props.history.location可以獲取到傳遞過(guò)來(lái)的數據

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

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

需要用到高階組件withRouter

 狀態(tài)提升

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

context

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

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

通過(guò)getChildContext()將屬性傳遞給所有的子孫組件
提供 context 的組件必須提供 childContextTypes 作為 context 的聲明和驗證。 

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

  render () {
    return (
      <h1 style={{ color: this.context.themeColor }}>標題</h1>
    )
  }
}

子組件要獲取 context 里面的內容的話(huà)，就必須寫(xiě) contextTypes 來(lái)聲明和驗證你需要獲取的狀態(tài)的類(lèi)型，它也是必寫(xiě)的，如果你不寫(xiě)就無(wú)法獲取 context 里面的狀態(tài)。
Title 想獲取 themeColor，它是一個(gè)字符串，我們就在 contextTypes 里面進(jìn)行聲明。

引入redux

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

　　redux將整個(gè)應用狀態(tài)存儲到store,store里保存著(zhù)一個(gè)state狀態(tài)樹(shù)

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

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

到此這篇關(guān)于React傳遞參數的幾種方式的文章就介紹到這了,更多相關(guān)React傳遞參數內容請搜索腳本之家以前的文章或繼續瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！