Как передавать данные реквизита между двумя функциональными компонентами

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 компонент есть, т. Е. 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;