通过React传递多个参数可以使用props对象或者使用Context API。
// Parent组件
import React from 'react';
import Child from './Child';
const Parent = () => {
const param1 = '参数1';
const param2 = '参数2';
return (
<Child param1={param1} param2={param2} />
);
}
export default Parent;
// Child组件
import React from 'react';
const Child = (props) => {
const { param1, param2 } = props;
return (
<div>
<p>参数1: {param1}</p>
<p>参数2: {param2}</p>
</div>
);
}
export default Child;
// 创建Context对象
const MyContext = React.createContext();
// 父组件
import React from 'react';
import Child from './Child';
const Parent = () => {
const param1 = '参数1';
const param2 = '参数2';
return (
<MyContext.Provider value={{ param1, param2 }}>
<Child />
</MyContext.Provider>
);
}
export default Parent;
// 子组件
import React from 'react';
import MyContext from './MyContext';
const Child = () => {
return (
<MyContext.Consumer>
{({ param1, param2 }) => (
<div>
<p>参数1: {param1}</p>
<p>参数2: {param2}</p>
</div>
)}
</MyContext.Consumer>
);
}
export default Child;
以上是通过React传递多个参数的两种常见方式。在实际开发中,可以根据具体需求选择合适的方式来传递参数。
领取专属 10元无门槛券
手把手带您无忧上云