我如何传递props来只显示表中的某些列？

// 父组件
import React from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  // 定义所有列
  const columns = [
    { name: '姓名', field: 'name' },
    { name: '年龄', field: 'age' },
    { name: '性别', field: 'gender' },
    // 其他列...
  ];

  // 定义要显示的列
  const visibleColumns = [
    { name: '姓名', field: 'name' },
    { name: '年龄', field: 'age' },
  ];

  return (
    <div>
      <ChildComponent columns={visibleColumns} />
    </div>
  );
};

export default ParentComponent;

// 子组件
import React from 'react';

const ChildComponent = ({ columns }) => {
  // 渲染表头
  const renderTableHeader = () => {
    return (
      <tr>
        {columns.map((column) => (
          <th key={column.field}>{column.name}</th>
        ))}
      </tr>
    );
  };

  // 渲染每一行的数据
  const renderTableData = () => {
    const data = [
      { name: '张三', age: 20, gender: '男' },
      { name: '李四', age: 25, gender: '女' },
      // 其他数据...
    ];

    return data.map((item, index) => (
      <tr key={index}>
        {columns.map((column) => (
          <td key={column.field}>{item[column.field]}</td>
        ))}
      </tr>
    ));
  };

  return (
    <table>
      <thead>{renderTableHeader()}</thead>
      <tbody>{renderTableData()}</tbody>
    </table>
  );
};

export default ChildComponent;