1.父組件向子組件傳參

回調函數也是參數的一種，也可以傳給子組件，達到子組件控制父組件的目的

import React from 'react'; import ReactDOM from 'react-dom';function Son(props) {return <div>父組件的名稱是{props.name}</div> }function Father(props) {return (<Son name="Father"/>); } ReactDOM.render(<Father/>, document.getElementById('root'));

2.事件處理函數傳參

import React from 'react'; import ReactDOM from 'react-dom';function Father(props) {function getName(e) {console.log(`傳遞參數的值是${e}`);}return (<button onClick={getName.bind(this,"Father")}>click me</button>); } ReactDOM.render(<Father/>, document.getElementById('root'));

3.路由傳參

函數組件，可以使用hook

import React from 'react'; import ReactDOM from 'react-dom';import {BrowserRouter as Router,Switch,Route,Link,useParams } from "react-router-dom";export default function ParamsExample() {return (<Router><div><ul><li><Link to="/yahoo/321">Yahoo321</Link></li><li><Link to="/yahoo/123">Yahoo123</Link></li></ul><Switch><Route path="/yahoo/:id" children={<Child />} /></Switch></div></Router>); } function Child(props) {let {id} = useParams();return (<div><h3>ID: {id}</h3></div>); }ReactDOM.render(<ParamsExample/>, document.getElementById('root'));

總結

以上是生活随笔為你收集整理的React几种传递参数的方法的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。