Question

我想在其他组件中使用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 中使用它。请帮助它已经浪费了很多时间。我试图直接使用但不起作用。

Answer 1

您可以通过以下两种方法进行管理：

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

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

2 个答案: