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

#reactjs #components

#reactjs #Компоненты

Вопрос:

Я хочу использовать значение реквизита в другом компоненте, но, будучи новичком в react, я не могу этого сделать.

У меня есть эти два функциональных компонента в одном файле

 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. Пожалуйста, помогите, это уже потратило впустую много времени. Я пытался использовать напрямую, но это не сработало.

1. Что это SortTable за компонент, который вы используете? Что это делает с переданным компонентом actions ?

2. actionmarkup передается этому сортируемому компоненту

3. Я могу передать ClientID этому, но другие компоненты также используют это, и когда я использую его, показанный clientid не является реквизитом в других местах

4. Вы пробовали actions={<ActionMarkup unique_id={id} />} ?

5. @BoyWithSilverWings это показывает, что ActionMarkup не определен

Ответ №1:

У вас есть два варианта справиться с этим:

Использование HOC (компонент высокого порядка): Это своего рода компонент, который будет обертывать как actionMarkup, так и ClientTaskIndex и содержать все реквизиты, разделяемые между этими двумя компонентами. Таким образом, вам будет легко получить необходимый реквизит от HOC. https://reactjs.org/docs/higher-order-components.html
Использование контейнера состояний в качестве Redux: https://redux.js.org /

Ответ №2:

СПЕЦИАЛЬНАЯ опция:

 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;