如何在两个功能组件之间传递 props 数据答案

【问题标题】：How to pass props data between two functional components如何在两个功能组件之间传递 props 数据
【发布时间】：2019-09-09 19:43:42
【问题描述】：

我想在其他组件中使用 props 值，但是我是新手，所以我不能这样做。

我将这两个功能组件放在同一个文件中

const actionMarkup = ({ unique_id }) => (
    <React.Fragment>
      <ClientTaskLink taskId={unique_id}>
        <ViewButton />
      </ClientTaskLink>
    </React.Fragment>
  ) 
const ClientTaskIndex = ({tasks, toggleCompleted, showCompleted,clientId}) => {
        return(
            <div className="component">
            <SortTable columns={columns} clientId={clientId} data={tasks} actions={actionMarkup} defaultSort="start_time" defaultDirection="desc" />
            <div className="list-actions">
              <a href="#" onClick={toggleCompleted}>{`${ showCompleted ? 'Hide' : 'View' } Completed Tasks`}</a>
            </div>
            <style jsx>{`
              .list-actions {
                text-align: center;
                margin-top: 30px;
                font-weight: bold;
              }
            `}</style>
          </div>
        ) 
}
    export default ClientTaskIndex;

ClientTaskIndex 组件中有一个道具，即 clientId，我想在 actionMarkup 中使用它。请帮助它已经浪费了很多时间。我试过直接用但是不行。

【问题讨论】：

您使用的这个SortTable 组件是什么？对actions传入的组件做了什么？
actionmarkup 被传递给这个 Sortable 组件
我可以将 clientId 传递给它，但其他组件也在使用它，当我使用它时，显示 clientid 在其他地方不是道具
你试过actions={<ActionMarkup unique_id={id} />}吗？
@BoyWithSilverWings 它显示 ActionMarkup 未定义

标签： reactjs components

【解决方案1】：

您有两种选择来管理它：

使用 HOC（高阶组件）：这是一种组件，将包装 actionMarkup 和 ClientTaskIndex 并保存这两个组件之间共享的所有道具.因此，很容易从 HOC 获得必要的道具。 https://reactjs.org/docs/higher-order-components.html
使用状态容器作为 Redux：https://redux.js.org/

【讨论】：

我需要一个解决方案

【解决方案2】：

HOC 选项：

const HocComponent = ({ clientId }) => (
 <div>
    <ClientTaskLink clientId={clientId}>
    <ActionMarkup clientId={clientId}>
  </div>
);


const ActionMarkup = ({ unique_id, clientId }) => (
    <React.Fragment>
      <ClientTaskLink taskId={unique_id}>
        <ViewButton />
      </ClientTaskLink>
    </React.Fragment>
  ) 
const ClientTaskIndex = ({tasks, toggleCompleted, showCompleted,clientId}) => {
        return(
            <div className="component">
            <SortTable columns={columns} clientId={clientId} data={tasks} actions={actionMarkup} defaultSort="start_time" defaultDirection="desc" />
            <div className="list-actions">
              <a href="#" onClick={toggleCompleted}>{`${ showCompleted ? 'Hide' : 'View' } Completed Tasks`}</a>
            </div>
            <style jsx>{`
              .list-actions {
                text-align: center;
                margin-top: 30px;
                font-weight: bold;
              }
            `}</style>
          </div>
        ) 
}

export default HocComponent;

【讨论】：

这会影响某些功能还是现在 clientId 可用
哪些功能？
Sortable 提供的功能