React TypeScript组件接收字符串数组Props报错，求正确实现方式

错误原因 #

你代码里的报错是因为直接在this.props对象上调用了map方法，但this.props是包含names数组的整个Props对象，并不是数组本身，所以TypeScript会提示找不到map方法。

修正后的代码 #

把this.props.map改成this.props.names.map，就能正确遍历数组了：

import * as React from 'react';

export interface IListNameProps {
    names: string[]
}

export interface IListNameState {

}

export default class ListName extends React.Component<IListNameProps, IListNameState> {

  constructor(props: IListNameProps) {
    super(props);
    this.state = {}
  }

  public render() {
    return (
        <ul>
          {/* 访问props里的names数组进行遍历 */}
          {this.props.names.map((name) => (
            <li key={name}>{name}</li>
          ))}
        </ul>
      );
  }
}

传递字符串数组的正确方式 #

在父组件中使用ListName组件时，直接通过names属性传入字符串数组即可：

// 父组件示例
import ListName from './ListName';

function ParentComponent() {
  const nameList = ["张三", "李四", "王五"];
  return <ListName names={nameList} />;
}

额外建议 #

为了避免数组为空或未传递时的报错，可以给Props里的数组添加可选标识，并在渲染时做兜底处理：

// 修改接口，把names设为可选
export interface IListNameProps {
    names?: string[]
}

// 渲染时兜底为空数组
public render() {
  const { names = [] } = this.props;
  return (
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
    );
}

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