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

Я хочу передать реквизиты от родительского к нескольким дочерним компонентам, но в итоге получаю сообщение об ошибке 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
Получение данных из формы с помощью JavaScript - краткое руководство
Получение данных из формы с помощью JavaScript - краткое руководство
Получить данные из формы с помощью JS очень просто: вы запрашиваете элемент формы, передаете его конструктору new FormData() и, наконец, получаете...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
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)
    }
  });

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

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