React开发中如何在子组件内部调用父组件定义的函数？

核心实现逻辑 #

React中父子组件通信时，父组件可将需要调用的方法作为props传递给子组件，子组件触发对应事件时调用该props方法即可完成需求。

1. 父组件（TileGrid）改造 #

首先解决类组件方法的this指向问题，同时将方法作为props传递给子组件：

import React, { Component } from 'react'
import Tile from './Tile.js';

export default class TileGrid extends Component {
    constructor(props) {
        super(props);
        this.state = {
          // 后续updateTileData要更新的状态可放在此处
        }
    }

    // 用类字段箭头函数，确保this始终指向当前组件实例
    updateTileData = (value) => {
        // 在这里处理逻辑、更新state
        console.log('接收到子组件传递的值：', value)
    }

    render() {
        // 原代码中的this.test()未定义，需删除否则会报错
        return (
            {/* 将updateTileData作为onTileClick属性传给子组件 */}
            <Tile name='Dog' image='dog' onTileClick={this.updateTileData} /> 
        )
    }
}

2. 子组件（Tile）改造 #

接收父组件传递的方法，在点击事件中触发：

import React from 'react';
import ButtonBase from '@mui/material/ButtonBase';
import './styles/Tile.css';

function Tile(props) {
    return(
        <div className="Tile">
            <ButtonBase onClick={() => props.onTileClick(props.name)}>
                Button
            </ButtonBase>
        </div>
    );
}

export default Tile;

点击按钮后就会将子组件的name值作为参数传递给父组件的updateTileData方法。

优化建议 #

• 如果不需要兼容旧代码，优先使用函数组件+Hooks的写法替代类组件，是当前React官方推荐的标准写法，以下是Hooks版本的父组件示例：

import React, { useState } from 'react'
import Tile from './Tile.js';

export default function TileGrid() {
  const [tileData, setTileData] = useState(null)

  const updateTileData = (value) => {
    setTileData(value)
    console.log('更新后的值：', value)
  }

  return <Tile name='Dog' image='dog' onTileClick={updateTileData} /> 
}

• 可以给组件的props添加类型校验，引入prop-types库对传递的属性、方法做类型约束，避免开发阶段传参错误
• 如果组件嵌套层级很深（超过3层），可以考虑用useContext或者状态管理库（Redux、Zustand等）做跨层级通信，避免逐层传递props

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