Как вызвать состояние из другого компонента в Reactjs
Привет, мир, мне нужна помощь с этим.
У меня есть компонент индикатора выполнения и компонент, в котором я использую индикатор выполнения. И еще один компонент, который должен запускать индикатор выполнения.
Примеры структуры приложения
- Home.js
- Компонент с индикатором выполнения (Компонент 1)
- Компонент между ними (компонент 2)
- Компонент, из которого я хочу вызвать индикатор выполнения (Компонент 3)
- Компонент между ними (компонент 2)
- Компонент с индикатором выполнения (Компонент 1)
- Компонент ProgressBar (ПрогрессБар)
Https://codesandbox.io/s/optimistic-stallman-rjxi9?file=/src/App.js
Это пример того, чего именно я хочу добиться и как я это себе представляю. код не работает, но вы поймете это из структуры кода.
Я хочу выполнить onClick из Компонента 3, чтобы изменить состояние индикатора выполнения, которое находится в Компоненте 1, но между ними есть компонент, а также индикатор выполнения на собственном компоненте.
Я пробовал обычно передавать функцию новой функции в компоненте, из которого я хочу вызвать это действие (Компонент 3), и передать эту функцию кнопке. но выдает ошибку "Ошибка типа this.props.* не является функцией"
Заранее спасибо
Да, я уже заявлял, что это не оригинальный код, которым так сложно поделиться прямо сейчас, и мне не разрешено делиться, но я сделал упрощенную версию, просто хочу вызвать индикатор выполнения. В исходном коде появляются ошибки
Ответы 1
На данный момент вы создали функцию handleProgress в C1, но никогда не передавали ее в C2 и C3.
Чтобы передать его на C2 и C3, вам нужно удалить их из компонента App и переместить в C1.
Спасибо, но я не t get your answer, I assume they are children of Component 1 if you looked into the App.js? Isn разве это не то, что вы имеете в виду?
Я видел ваше решение, оно имеет смысл, но в моем случае, что, если я не могу удалить их из App.js
Затем вам нужно поднять состояние до приложения и сохранить прогресс в приложении. Коммуникация в React происходит вверх и вниз, а не горизонтально между компонентами (это возможно, но это некрасиво и пахнет кодом)
Я согласен с вами, но сейчас у меня нет выбора, проект уже есть, и потребуется время, чтобы многое изменить, не могли бы вы показать мне уродливый способ, я был бы признателен за это, спасибо
Вы просили исправить ваш код, который не работал, и я это сделал. То, что вы задаете, это другой вопрос. Пожалуйста, создайте новый вопрос, и коллективный разум Stack Overflow поможет вам :)
Спасибо, я ценю ваш ответ, но когда я разместил код, это был пример, и я четко указал, чего я хочу достичь, не ставя под угрозу структуру приложения. Ваш ответ очень полезен не только в моем случае, но и для всех, кто столкнется с той же проблемой в будущем.
@ dev01, пожалуйста, примите мой ответ, если я вам помог :)
Давайте продолжим обсуждение в чате.
Похоже, вы на правильном пути (передавая свою функцию обратного вызова вниз по дереву компонентов) — можете ли вы обновить свой пример, включив в него код, который у вас был, когда вы столкнулись с ошибкой типа this.props. * не является функцией? Звучит как правильный подход, но с ошибкой где-то при передаче или вызове функции.