Передача реквизита от родителя к детям в реакции

Я хочу передать реквизиты от родительского к нескольким дочерним компонентам, но в итоге получаю сообщение об ошибке Cannot read properties of undefined (reading 'props') Приложение.js:

  render() {
    const {currentUser} = this.props
    return (
      <div id = "App" className='loader'>
        <BrowserRouter>
            <Routes>
              <Route path='women' element = {<Women currentUser = {currentUser} />} />

Женщины.js:

  render() {
    const { isLoading } = this.state;
    if (isLoading) {
        return null;
    }
    const {currentUser} = this.props

    return (
        <div>
            <div className='container mx-auto'>
                <HomeHeaderW style = {{ backgroundColor: "#fff2e0" }} currentUser = {currentUser} />

ГлавнаяЗаголовокW.js :

function HomeHeaderW() {
   const {currentUser} = this.props
   const [isLogged, setLogged] = useState(false);
   useEffect(() => {
     if (currentUser) {
         setLogged(true)
     }
   });

Я не знаю, почему я получаю ошибку undefined, у вас есть идеи по этому поводу? Или я делаю это неправильно

HomeHeaderW не является компонентом, основанным на классе, поэтому я думаю, что вы не можете использовать this.props, но вместо этого ваша функция должна иметь props в качестве входного параметра: function HomeHeaderW(props) { ... }. Если у вас есть другие компоненты с функциями render, то похоже, что ваш проект может смешивать компоненты на основе классов с функциональными компонентами, поэтому эти две вещи не совсем выглядят/действуют одинаково.
mr rogers 06.04.2022 19:35

@mr rogers объяснил, что нужно сделать, чтобы заставить его работать, но природа сообщения об ошибке связана не с реакцией, а с JavaScript, «это» внутри этой функции не определено, поскольку эта функция объявлена ​​в глобальном объекте и в разделе « строгий режим», у вас не может быть прямого доступа к глобальному объекту с ключевым словом «this».

Cesare Polonara 06.04.2022 19:42
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
2
36
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

HomeHeaderW — это компонент, основанный на функциях (Women и App — компоненты, основанные на классах), вы не можете получить свойства от this.props

Вы должны передать свои реквизиты в параметрах

function HomeHeaderW(props) {
  const {
    currentUser
  } = props;

  const [isLogged, setLogged] = useState(false);
  useEffect(() => {
    if (currentUser) {
      setLogged(true)
    }
  });

Вы можете проверить этот документ для лучшего понимания

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