react有哪幾種傳遞參數的方式

React 是一個用於建立使用者介面的 JAVASCRIPT 函式庫。

React 主要用於建立UI，許多人認為 React 是 MVC 中的 V（視圖）。

React 起源於 Facebook 的內部項目，用來架設 Instagram 的網站，並於 2013 年 5 月開源。

React 擁有較高的效能，程式碼邏輯非常簡單，越來越多的人已開始關注和使用它。

最常見的就是父子元件之間傳遞參數

父元件往子元件傳值，直接用this.props就可以實作

父元件中，給需要傳遞資料的子元件加入自訂屬性，在子元件中透過this.props就可以取得到父元件傳遞過去的資料

// 父组件 render() {        
    return (                // 使用自定义属性传递需要传递的方法或者参数
                <ShopUi toson={this.state}></ShopUi>            
                   )
    } 

//子组件　//通过this.props.toson就可以获取到父组件传递过来的数据 、、如果还需要往孙组件传递那么在子组件通过自定义属性继续传递就行了
      tograndson={this.props.toson}
、、孙组件通过this.props.tograndson获取到数据

子元件給父元件傳值的話，需要在父元件設定接收函數和state，同時將函數名稱透過props傳遞給子元件

也就是給子元件傳入父元件的方法，在子元件進行呼叫

//孙子组件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: &#39;&#39;,
            sex: &#39;&#39;
        }   
    },
    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>        )
    }
}

前一段時間有人問過我這樣一個問題，constructor裡面的super()是幹嘛用的？

總結一下：

如果要在子類別的constructor裡使用this，必須呼叫父類別constructor，否則就拿不到this

那麼問題就來了，如何呼叫父類別的constructor呢？透過super()

如果要在constructor裡使用父元件傳遞過來的參數，必須在呼叫父元件super時，傳遞參數給父元件的constructor

如果不在constructor裡面使用this ，或參數，就不需要super ； 因為React以及幫你做了this，props的綁定

#路由傳參

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

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

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

當頁面跳轉時

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

接收    透過this.props.history.location可以取得到傳遞過來的數據

路由傳參可能會有這個問題，就是只有在路由定義時掛載的元件中才會有props裡面的location history match 

路由上掛載的那個元件一般都是Container.js，一般我們會往下分出UI.js元件，在這裡面進行點擊跳轉，UI元件props裡沒有location history match 

#需要用到高階元件withRouter

狀態提升

將多個元件需要共享的狀態提升到離他們最近的那個公共父元件上，然後父元件透過props分發給子元件

context

當某個元件在自己的context中保存了某個狀態，那個該元件下的所有子孫元件都可以存取到這個狀態，不需要中間元件的傳遞，而這個元件的父元件是沒辦法存取的

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 的声明和验证。

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

  render () {
    return (
      <h1 id="标题">标题</h1>
    )
  }
}
子组件要获取 context 里面的内容的话，就必须写 contextTypes 来声明和验证你需要获取的状态的类型，它也是必写的，如果你不写就无法获取 context 里面的状态。
Title 想获取 themeColor，它是一个字符串，我们就在 contextTypes 里面进行声明。

引入redux

redux為React提供可預測化的狀態管理機制

redux將整個應用程式狀態儲存到store,store裡保存著一個state狀態樹

元件可以發放(dispatch)  行為(action)  給store , 而不是直接通知其它元件

其它元件可以透過訂閱store中的狀態state來刷新自己的檢視

相關推薦：react教學

#

以上是react有哪幾種傳遞參數的方式的詳細內容。更多資訊請關注PHP中文網其他相關文章！