React中如何在CreditFilter组件内访问传入的二维数组？

你完全可以通过props访问传递的rowData数组，只需要两步操作：

1. 更新CreditFilter的Props类型定义 #

当前你的Props接口只定义了status，需要添加rowData字段的类型：

interface Props {
  status: string;
  // 定义二维字符串数组类型
  rowData: string[][];
}

2. 在CreditFilter组件内部访问rowData #

更新接口后，就可以直接通过props.rowData访问，或者用解构赋值简化写法：

export const CreditFilter: FunctionComponent<Props> = props => {
    // 方式1：直接通过props访问
    console.log(props.rowData);

    // 方式2：解构赋值，更简洁
    const { rowData, status } = props;
    console.log(rowData);

    // 示例：用rowData渲染内容
    return (
        <div>
            {rowData.map((row, index) => (
                <div key={index}>{row.join(' | ')}</div>
            ))}
        </div>
    );
};

补充说明 #

这是React组件间传递数据的标准方式，只要父组件通过属性传递（比如你写的<CreditFilter status="" rowData={rowData} />），子组件在Props接口中声明对应字段后就能正常访问。如果后续rowData会动态变化，组件也会自动响应数据更新。

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