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