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

5. history.push传递参数

function onTouch(e) {
	history.push({
		pathname: "/home",
		state: {
			postId: e
		}
	});

}

import {useLocation} from 'react-router-dom';
let location = useLocation();
console.log("id", location.state.postId)