React如何实现函数式子组件向类父组件传递数据

• 函数式组件没有组件实例，直接在函数式子组件上绑定ref默认无法拿到组件内部值，会返回null
• 你在render阶段打印ref的时机不对，render执行时组件还未完成挂载，ref还未被赋值，此时取值必然是null
• 你的子组件本身也没有做任何对外暴露内部值的逻辑，就算ref绑定正确也无法读取到params.name

方案1：回调传值（优先推荐，符合React单向数据流规范） #

不需要使用ref，直接通过父组件向子组件传递回调函数的方式接收值，是官方推荐的父子组件传值实现方式。

子组件修改 #

import { useParams } from 'react-router-dom';
import { useEffect } from 'react';

const GetUsername = ({ onUsernameReady }) => {
  const params = useParams();
  // 拿到路由参数后，调用父组件传的回调把值传出去
  useEffect(() => {
    if (params.name && onUsernameReady) {
      onUsernameReady(params.name);
    }
  }, [params.name, onUsernameReady]);

  return <p>{params.name}</p>;
};

export default GetUsername;

父组件修改 #

import React, { Component } from 'react';
import GetUsername from './GetUsername'; // 替换为你的组件实际路径

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.state = {
      username: ''
    };
  }

  // 定义接收子组件值的回调方法
  handleUsernameLoad = (username) => {
    this.setState({ username });
    console.log('父组件接收到用户名：', username);
  }

  render() {
    return (
      <div>
        {/* 把回调作为prop传给子组件 */}
        <GetUsername onUsernameReady={this.handleUsernameLoad} />
        {/* 其余业务代码 */}
        <span>当前获取到的用户名：{this.state.username}</span>
      </div>
    );
  }
}

方案2：ref取值方案（仅在特殊场景使用） #

如果必须通过ref方式取值，需要通过forwardRef做ref转发，配合useImperativeHandle主动向父组件暴露内部值，同时要注意选对ref取值的时机。

子组件修改 #

import { useParams } from 'react-router-dom';
import { forwardRef, useImperativeHandle } from 'react';

// 用forwardRef包裹组件，接收父组件传入的ref
const GetUsername = forwardRef((props, ref) => {
  const params = useParams();
  // 主动把要暴露的值绑定到ref上
  useImperativeHandle(ref, () => ({
    username: params.name
  }), [params.name]);

  return <p>{params.name}</p>;
});

export default GetUsername;

父组件修改 #

import React, { Component } from 'react';
import GetUsername from './GetUsername'; // 替换为你的组件实际路径

export default class Test extends Component {
  constructor(props) {
    super(props);
    this.userRef = React.createRef();
  }

  componentDidMount() {
    // 必须等组件挂载完成后再取ref值，此时ref才完成赋值
    console.log('通过ref拿到的用户名：', this.userRef.current?.username);
  }

  render() {
    // 不要在render阶段读ref，此时ref还未赋值，拿到的是null
    return (
      <div>
        <GetUsername ref={this.userRef} />
        {/* 其余业务代码 */}
      </div>
    );
  }
}

• 优先选方案1实现，逻辑清晰无额外API成本，符合React数据流转设计，后续维护成本更低
• 如果选方案2，不要在render阶段读取ref值，必须在componentDidMount、componentDidUpdate这类挂载/更新完成的生命周期，或者事件回调中读取

内容的提问来源于stack exchange，提问作者Aaron