React中简化向静态函数组件传递Props的写法

针对你目前的代码，有几种简洁的方式可以减少属性传递的冗余：

1. 利用扩展运算符合并传递属性 #

可以直接把item.name单独传递，再用扩展运算符...把item.meta里的所有属性一次性传给Row组件，避免逐个手动写属性：

public table(data: any[] | ""){
  return (
    <table>
      {data !== "" && data.map((item) => (
        <Row name={item.name} {...item.meta} />
      ))}
    </table>
  )
}

2. 提前解构数据再传递 #

在map回调里先解构item的属性，让代码更清晰，再传递给Row组件：

public table(data: any[] | ""){
  return (
    <table>
      {data !== "" && data.map(({ name, meta }) => (
        <Row name={name} {...meta} />
      ))}
    </table>
  )
}

3. 优化TypeScript类型定义（可选但推荐） #

原来的props: any和data: any[]不够严谨，建议定义明确的类型，既提升代码提示也避免类型错误：

// 定义Row组件的属性类型
interface RowProps {
  name: string;
  x: string;
  y: string;
  memo: string;
}

// 定义数据项的类型
interface TableItem {
  name: string;
  meta: RowProps;
}

// 修改table方法的参数类型
public table(data: TableItem[] | ""){
  return (
    <table>
      {data !== "" && data.map(({ name, meta }) => (
        <Row name={name} {...meta} />
      ))}
    </table>
  )
}

// Row组件使用明确的类型
function Row(props: RowProps){
  return (
    <tr>
      <td>{props.name}</td>
      <td>{props.x}</td>
      <td>{props.y}</td>
      <td>{props.memo}</td>
    </tr>
  )
}

另外注意你原来的Row组件里，<td>props.name</td>这种写法是直接输出字符串，应该改成<td>{props.name}</td>才能正确渲染属性值，上面的代码已经修正了这个问题。

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