如何在React中截断Bootstrap Table中单元格中的文本？

import React from 'react';

const TruncatedText = ({ text, maxLength }) => {
  if (text.length <= maxLength) {
    return <span>{text}</span>;
  }

  const truncatedText = text.substring(0, maxLength) + '...';

  return <span>{truncatedText}</span>;
};

const Table = () => {
  const data = [
    { id: 1, text: 'This is a long text that needs to be truncated' },
    { id: 2, text: 'Another long text that should be truncated' },
    // ...
  ];

  return (
    <table className="table">
      <thead>
        <tr>
          <th>ID</th>
          <th>Text</th>
        </tr>
      </thead>
      <tbody>
        {data.map(item => (
          <tr key={item.id}>
            <td>{item.id}</td>
            <td>
              <TruncatedText text={item.text} maxLength={20} />
            </td>
          </tr>
        ))}
      </tbody>
    </table>
  );
};

export default Table;