如何根据React中的用户角色显示表行

import React from 'react';

const Table = ({ data, userRole }) => {
  return (
    <table>
      <thead>
        <tr>
          <th>列1</th>
          <th>列2</th>
          <th>列3</th>
        </tr>
      </thead>
      <tbody>
        {data.map((item, index) => (
          // 根据用户角色判断是否显示表行
          {userRole === 'admin' || item.visibleTo.includes(userRole) ? (
            <tr key={index}>
              <td>{item.column1}</td>
              <td>{item.column2}</td>
              <td>{item.column3}</td>
            </tr>
          ) : null}
        ))}
      </tbody>
    </table>
  );
};

export default Table;