如何在React页面加载时触发useEffect实现react-admin表格文本自动截断

问题分析 #

你当前的代码直接操作DOM实现文本截断，但首次页面加载时，react-admin还在从API请求数据，表格对应的MuiTypography-body2元素尚未渲染，导致DOM操作找不到目标元素，截断逻辑不生效；切换回组件时数据已缓存，DOM元素存在，逻辑才能正常执行。

解决方案 #

方案1：自定义截断字段组件（推荐） #

直接通过React组件处理文本截断，符合react-admin的数据流逻辑，无需依赖DOM操作，从根源避免问题。

import { TextField } from 'react-admin';

// 自定义截断文本字段
const TruncatedTextField = ({ record = {}, source, maxLength = 20, ...props }) => {
  const rawText = record[source] || '';
  const displayText = rawText.length > maxLength 
    ? `${rawText.substring(0, maxLength)}...` 
    : rawText;

  // 传递处理后的文本给默认TextField
  return <TextField {...props} record={{ ...record, [source]: displayText }} source={source} />;
};

// 在列表页面中使用
import { Datagrid, List } from 'react-admin';

export const YourResourceList = () => (
  <List>
    <Datagrid>
      {/* 替换原来的TextField为自定义组件 */}
      <TruncatedTextField source="content" label="内容" maxLength={20} />
      {/* 其他字段 */}
    </Datagrid>
  </List>
);

方案2：监听数据加载状态后执行DOM操作 #

利用react-admin的useGetList钩子，等待数据加载完成后再执行截断逻辑：

import { useGetList, Datagrid, List } from 'react-admin';
import { useEffect } from 'react';

export const YourResourceList = () => {
  // 替换为你的资源名称
  const { data, isLoading } = useGetList('your_resource');

  useEffect(() => {
    // 数据加载完成后执行截断
    if (!isLoading && data) {
      const spans = document.getElementsByClassName("MuiTypography-body2");
      [...spans].forEach(span => {
        if (span.textContent.length > 20) {
          span.textContent = `${span.textContent.substring(0, 20)}...`;
        }
      });
    }
  }, [data, isLoading]);

  return (
    <List>
      <Datagrid>
        {/* 你的字段配置 */}
      </Datagrid>
    </List>
  );
};

方案3：用MutationObserver监听DOM变化 #

如果无法修改字段组件，可通过监听DOM变化，在目标元素出现时自动执行截断：

import { Datagrid, List } from 'react-admin';
import { useEffect } from 'react';

export const YourResourceList = () => {
  useEffect(() => {
    const observer = new MutationObserver(mutations => {
      mutations.forEach(mutation => {
        if (mutation.addedNodes.length) {
          const spans = document.getElementsByClassName("MuiTypography-body2");
          [...spans].forEach(span => {
            // 避免重复截断
            if (span.textContent.length > 20 && !span.textContent.endsWith('...')) {
              span.textContent = `${span.textContent.substring(0, 20)}...`;
            }
          });
        }
      });
    });

    // 监听整个文档的DOM变化
    observer.observe(document.body, { childList: true, subtree: true });

    // 组件卸载时停止监听
    return () => observer.disconnect();
  }, []);

  return (
    <List>
      <Datagrid>
        {/* 你的字段配置 */}
      </Datagrid>
    </List>
  );
};

注意事项 #

优先选择方案1，因为直接操作DOM可能会在react-admin数据更新（如分页、筛选）后失效，而自定义组件能跟随数据变化自动处理文本截断。

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