React Hooks中如何在AG Grid单元格渲染器内调用方法？

你当前的问题是因为React中事件处理不能用字符串形式（onClick="goToDetails()"），这种写法会在全局作用域查找函数，而组件内的goToDetails是局部函数，所以无法触发。下面是几种可行的解决方式：

1. 直接绑定函数引用 #

把onClick的字符串写法换成函数引用，函数组件内的函数无需考虑this指向问题，直接使用即可：

import React from 'react';
export default (props) => {
    const goToDetails = () => {
        // 可直接使用props中的数据，比如当前单元格值props.value、整行数据props.data
        console.log('跳转详情，ID：', props.value);
    }
  
    return <a href="javascript:;" onClick={goToDetails}>{props.value}</a>;
};

2. 传递自定义参数 #

如果需要在函数中传递额外参数（比如AG Grid的单元格参数），用箭头函数包裹即可：

import React from 'react';
export default (props) => {
    const goToDetails = (params) => {
        console.log('当前行数据：', params.data);
        console.log('当前字段值：', params.value);
    }
  
    return <a href="javascript:;" onClick={() => goToDetails(props)}>{props.value}</a>;
};

3. 大数据量场景下的性能优化 #

如果表格数据量很大，频繁渲染单元格可能带来性能损耗，可以用useCallback缓存函数，避免不必要的重复创建：

import React, { useCallback } from 'react';
export default (props) => {
    const goToDetails = useCallback(() => {
        console.log('跳转详情，ID：', props.value);
    }, [props.value]); // 仅当props.value变化时，才重新创建函数
  
    return <a href="javascript:;" onClick={goToDetails}>{props.value}</a>;
};

4. 替代javascript:;的规范写法 #

href="javascript:;"属于较老旧的写法，你可以改用href="#"并在函数中阻止默认跳转行为，避免页面意外滚动到顶部：

const goToDetails = (e) => {
    e.preventDefault(); // 阻止a标签的默认跳转行为
    console.log('跳转详情，ID：', props.value);
}

return <a href="#" onClick={goToDetails}>{props.value}</a>;

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