当前位置：首页 > React

react如何传递参数

2026-02-26 04:42:15React

传递参数的方式

在React中，传递参数通常通过props、context或状态管理工具实现。以下是几种常见方法：

使用props传递参数

父组件通过props向子组件传递数据。子组件通过this.props（类组件）或直接解构（函数组件）接收参数。

// 父组件
function Parent() {
  const data = "Hello from parent";
  return <Child message={data} />;
}

// 子组件（函数组件）
function Child({ message }) {
  return <div>{message}</div>;
}

// 子组件（类组件）
class Child extends React.Component {
  render() {
    return <div>{this.props.message}</div>;
  }
}

使用context传递参数

适用于跨多层级组件传递数据，避免props逐层传递。

// 创建Context
const MyContext = React.createContext();

// 提供者组件
function Parent() {
  return (
    <MyContext.Provider value="Context Value">
      <Child />
    </MyContext.Provider>
  );
}

// 消费者组件（函数组件）
function Child() {
  return (
    <MyContext.Consumer>
      {value => <div>{value}</div>}
    </MyContext.Consumer>
  );
}

// 消费者组件（使用useContext钩子）
function Child() {
  const value = useContext(MyContext);
  return <div>{value}</div>;
}

通过事件回调传递参数

子组件通过回调函数向父组件传递参数。

// 父组件
function Parent() {
  const handleData = (data) => {
    console.log(data);
  };
  return <Child onSendData={handleData} />;
}

// 子组件
function Child({ onSendData }) {
  const sendData = () => onSendData("Data from child");
  return <button onClick={sendData}>Send</button>;
}

使用路由参数

通过React Router传递URL参数。

// 路由配置
<Route path="/user/:id" component={User} />

// 组件中获取参数（函数组件）
function User() {
  const { id } = useParams();
  return <div>User ID: {id}</div>;
}

// 类组件获取参数
class User extends React.Component {
  render() {
    const { id } = this.props.match.params;
    return <div>User ID: {id}</div>;
  }
}

状态管理工具传递参数

使用Redux或MobX等状态管理库全局共享数据。

react如何传递参数

// Redux示例
// 定义action
const sendData = (data) => ({ type: 'SEND_DATA', payload: data });

// 组件中dispatch
function Child() {
  const dispatch = useDispatch();
  const send = () => dispatch(sendData("Redux data"));
  return <button onClick={send}>Send</button>;
}

// 父组件通过selector获取
function Parent() {
  const data = useSelector(state => state.data);
  return <div>{data}</div>;
}