react.js 前端 前端框架 React几种传递参数的方法

1.父组件向子组件传参

回调函数也是参数的一种，也可以传给子组件，达到子组件控制父组件的目的

import React from 'react';

import ReactDOM from 'react-dom';

function Son(props) {

return

}

function Father(props) {

return (

);

}

ReactDOM.render(, document.getElementById('root'));

2.事件处理函数传参

import React from 'react';

import ReactDOM from 'react-dom';

function Father(props) {

function getName(e) {

console.log(`传递参数的值是${e}`);

}

return (click me);

}

ReactDOM.render(, 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 (

);

}

function Child(props) {

let {

id

} = useParams();

return (

);

}

ReactDOM.render(, document.getElementById('root'));

文章来源