React幾種傳遞參數的方法

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'));

類組件，使用this.props.match.params

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" component={Child}/>
        
        </Switch>
      </div>
    </Router>
	);
}
// <Route path="/yahoo/:id" children={<Child/>} />
//  <Route path="/yahoo/:id" Component={Child} />
// function Child(props) {

// 	let {
// 		id
// 	} = useParams();

// 	return (
// 		<div>
//       <h3>ID: {id}</h3>
//     </div>
// 	);
// }

class Child extends React.Component {
	constructor(props) {
		super(props);

	}

	componentDidMount() {
		//console.log(this.props.match);
		//	console.log(this.props.history);
		//console.log(this.props.location);
	}
	render() {

		return (<div>
       <h3>ID:{this.props.match.params.id}</h3>
     </div>)
	}


}


ReactDOM.render(<ParamsExample/>, document.getElementById('root'));

注意，引入子組件需要這麼寫：<Route path="/yahoo/:id" component={Child}/>

4.URL傳參

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?id=321">Yahoo321</Link>
          </li>
          <li>
            <Link to="/yahoo?id=123">Yahoo123</Link>
          </li>
     </ul>
        <Switch>
         <Route path="/yahoo" component={Child}/>
        
        </Switch>
      </div>
    </Router>
	);
}
// <Route path="/yahoo/:id" children={<Child/>} />
//  <Route path="/yahoo/:id" Component={Child} />
// function Child(props) {

// 	let {
// 		id
// 	} = useParams();

// 	return (
// 		<div>
//       <h3>ID: {id}</h3>
//     </div>
// 	);
// }

class Child extends React.Component {
	constructor(props) {
		super(props);

	}

	componentDidMount() {
		//console.log(this.props.match);
		//	console.log(this.props.history);
		console.log(this.props.location.search);
	}
	render() {

		return (<div>
       <h3>ID:{this.props.match.params.id}</h3>
     </div>)
	}


}


ReactDOM.render(<ParamsExample/>, document.getElementById('root'));