Слушайте внутренние дочерние события в ReactJs

Как я могу прослушать событие, которое происходит в дочернем компоненте дочернего компонента?

В приведенном ниже примере, как я могу обработать событие «ChildLevel2 — button — onClick» в «MainComponent»?

function MainComponent() {
  return (
    <>
      <ChildLevel1/>
    </>
  );
}

function ChildLevel1() {
  return (
    <>
      <ChildLevel2/>
    </>
  );
}

function ChildLevel2() {
  return (
    <>
      <button>Click-me!</button>
    </>
  );
}

продолжайте передавать реквизиты или используйте context API или Redux

— 15.07.2024 16:27

вы можете создать функцию onClick внутри основного компонента и передать ее ChildLevel2 в качестве реквизита.

— 15.07.2024 16:30

@Тони, ты имеешь в виду Main -> ChildLevel1 -> ChildLevel2?

— 15.07.2024 16:41

javascript reactjs

15.07.2024 16:25

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

чтобы показать пример того, что предлагают комментарии:

const MainComponent = () => {
    const handleNestedEvent = (e) => {
        console.info('handling event in top level component', e);
    }
    return (
        <ChildLevel1 onNestedEvent = {handleNestedEvent}/>
    )
}
const ChildLevel1 = ({ onNestedEvent }) => {
    return <ChildLevel2 onNestedEvent = {onNestedEvent}/>
}
const ChildLevel2 = ({ onNestedEvent }) => {
    return <button onClick = {onNestedEvent}>Click Me</button>
}

вместо этого можно использоватьContext: реагировать на контекстные документы

или Redux: React Redux docs

15.07.2024 16:47

Ответ принят как подходящий

Вот несколько возможных способов

1. Передача функции как реквизита. Это может стать головной болью, если вам придется передать ее слишком глубоко. Думаю, всего 2 уровня — это нормально.

function MainComponent(){
  const handleButtonClick = (data) => {
    console.info('from child2', data);
  };
  
  return (
    <React.Fragment>
      <ChildLevel1 onButtonClick = {handleButtonClick}/>
    </React.Fragment>
  );
};

function ChildLevel1({onButtonClick}){
  return (
    <React.Fragment>
      <ChildLevel2 onButtonClick = {onButtonClick}/>
    </React.Fragment>
  );

};

function ChildLevel2({onButtonClick}){
  return (
    <React.Fragment>
      <button onClick = {() => onButtonClick('passed data')}>Click-me!</button>
    </React.Fragment>
  );
}

ReactDOM.render(<MainComponent />, document.getElementById("app"));

<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id = "app"></div>

2. Использование контекстного API. createContext , useContext. Подобно централизованному состоянию, оно работает лучше, если оно слишком глубоко вложено, и вам не придется продолжать передавать его в качестве реквизита.

const ButtonClickContext = React.createContext(null);

function MainComponent(){
  const handleButtonClick = (data) => {
    console.info('from child2', data);
  };
  
  return (
    <ButtonClickContext.Provider value = {handleButtonClick}>
      <React.Fragment>
        <ChildLevel1/>
      </React.Fragment>
    </ButtonClickContext.Provider>
  );
};

function ChildLevel1(){
  return (
    <React.Fragment>
      <ChildLevel2/>
    </React.Fragment>
  );

};

function ChildLevel2(){
  const onButtonClick = React.useContext(ButtonClickContext);
  return (
    <React.Fragment>
      <button onClick = {() => onButtonClick('passed data')}>Click-me!</button>
    </React.Fragment>
  );
}

ReactDOM.render(<MainComponent />, document.getElementById("app"));

<script crossorigin src = "https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src = "https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id = "app"></div>

15.07.2024 16:49

Другие вопросы по теме

K8s aks реагирует на проблему маршрутизации: маршрутизация не осуществляется с IP-адреса svc, но отлично работает с IP-адреса локального хоста

Добавление расширенных настроек пользовательского интерфейса в интерфейсы WSO2 API-M прошло не очень хорошо

Получить только одни данные одного документа вместо всех документов

Ошибка «Ожидал 1–2 аргумента, но получил 3» в useQuery с React Query и TypeScript

Как выполнять запросы один за другим в useEffect

Ошибка типа: невозможно прочитать свойства неопределенного значения (чтение «коллекции») (соединение mongodb)

Не удается загрузить файл в исходную группу Azure Front Door из-за задержки?

Tailwind – React – лучший способ структурировать HTML в зависимости от размеров экрана

Правильный способ реализовать вход в Google

Инверсное колесо мышиZoom

Слушайте внутренние дочерние события в ReactJs

Ответы 2

Другие вопросы по теме

Похожие вопросы