如何在两个功能组件之间传递道具数据

Question

我想在其他组件中使用道具值但是新的反应我无法做到。

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

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组件中有一个prop，即clientId，我想在actionMarkup中使用它。请帮忙浪费很多时间。我试图直接使用但不工作。

Answer 1

您有两种选择来管理它：

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

Answer 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;