React函数组件props传递问题：如何在actionMarkup中使用clientId

别着急，这个问题其实很常见，核心是作用域和Props传递逻辑没理清。咱们一步步来搞定：

问题根源 #

你的actionMarkup是在ClientTaskIndex外部定义的，它的作用域里没有clientId；而且SortTable组件调用actions（也就是actionMarkup）的时候，应该只传递了当前行的unique_id这类数据，并没有自动带上ClientTaskIndex的clientId，所以直接用肯定拿不到。

方案一：通过闭包传递clientId（推荐，不改变组件结构） #

修改ClientTaskIndex里传递actions的方式，用匿名函数把clientId注入到actionMarkup的参数里：

const ClientTaskIndex = ({tasks, toggleCompleted, showCompleted,clientId}) => {
  return(
    <div className="component">
      {/* 这里把actions改成匿名函数，把clientId传给actionMarkup */}
      <SortTable 
        columns={columns} 
        clientId={clientId} 
        data={tasks} 
        actions={(rowProps) => actionMarkup({...rowProps, clientId: clientId})} 
        defaultSort="start_time" 
        defaultDirection="desc" 
      />
      {/* 其他内容不变 */}
    </div>
  )
}

然后更新actionMarkup的参数，接收clientId：

const actionMarkup = ({ unique_id, clientId }) => (
  <React.Fragment>
    {/* 现在可以正常使用clientId了，比如传给ClientTaskLink */}
    <ClientTaskLink taskId={unique_id} clientId={clientId}>
      <ViewButton />
    </ClientTaskLink>
  </React.Fragment>
)

方案二：把actionMarkup移到ClientTaskIndex内部（利用JS闭包特性） #

如果actionMarkup只在ClientTaskIndex里用到，直接把它放到组件内部，这样它就能直接访问外部的clientId变量：

const ClientTaskIndex = ({tasks, toggleCompleted, showCompleted,clientId}) => {
  // 把actionMarkup移到组件内部
  const actionMarkup = ({ unique_id }) => (
    <React.Fragment>
      {/* 直接使用外部作用域的clientId */}
      <ClientTaskLink taskId={unique_id} clientId={clientId}>
        <ViewButton />
      </ClientTaskLink>
    </React.Fragment>
  )

  return(
    <div className="component">
      <SortTable columns={columns} clientId={clientId} data={tasks} actions={actionMarkup} defaultSort="start_time" defaultDirection="desc" />
      {/* 其他内容不变 */}
    </div>
  )
}

这样写的好处是不用额外处理参数传递，利用JavaScript的闭包特性，内部函数可以直接访问外部组件的props变量。

额外提示 #

如果SortTable组件本身支持给actions传递额外参数，你也可以去查看它的文档，但上面两种方案是通用的，不管SortTable的实现如何都能生效。

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