Реагировать на настройку состояния путаницы приложения для вложенного дочернего компонента
Я разработчик встраиваемых систем, новичок в React и немного борюсь с поведением дочерних компонентов и вложенных дочерних компонентов.
Я понимаю, что для повторного рендеринга любого компонента его состояние должно измениться. Я использую пример компонента меню, в котором есть компонент элемента. Когда происходит какое-то событие глобального уровня, я хочу изменить текст, отображаемый компонентами элемента.
Вот скрипт, который показывает некоторый код, который, как я ожидаю, будет работать:
https://codesandbox.io/s/dark-rain-8mfsp?file=/src/App.tsx
При нажатии на div вызывается функция меню setText, которая вызывает компонент элемента, устанавливая состояние. Это состояние используется в функции рендеринга компонента элемента, поэтому я ожидаю повторного рендеринга и элемента, и меню.
Вместо этого я получаю сообщение об ошибке, говорящее о том, что я не могу установить состояние объекта, который еще не смонтирован. Я бы подумал, что он был установлен..
Возможно, проблема в том, как я связал объявленные компоненты с компонентами в функциях рендеринга, вызвав this.componentname.render(), но как еще это можно было сделать?
Заранее спасибо!
Ответы 1
Вот рабочая версия вашей песочницы. https://codesandbox.io/s/lucid-bird-qecj0?file=/src/App.tsx:0-899
Я вижу, что вы новичок, чтобы реагировать. Я бы посоветовал вам использовать хуки вместо компонентов класса.
Привет, KnowYourElements, я очень ценю рабочую версию, спасибо. Интересно, что во время изучения React мне внушили, что реквизиты неизменяемы и не должны использоваться для контента, который будет меняться, но вместо этого вы должны использовать состояние. Кроме того, для моего фактического приложения компонент элемента будет довольно сложным с несколькими функциями (на самом деле это будет массив флажков, которые динамически меняются, и каждый флажок имеет другую функцию), поэтому я не уверен, что смогу избежать использования класса компонент. Разве это не возможно так, как я пытался?
Невозможно сделать так, как вы пытались. Просто потому, что React работает иначе. Вы можете использовать компоненты на основе классов или функций. Это действительно не имеет значения. Но обратите внимание, компоненты на основе функций являются более новыми по сравнению с компонентами на основе классов. Я бы порекомендовал вам прочитать это простое руководство. Он использует компоненты на основе классов, которые могут вам помочь. reactjs.org/tutorial/tutorial.html#before-we-start-the-tutorial
Интересно, я думал, что начинаю понимать React, но, очевидно, он еще не пришелся мне по душе. Я сделаю этот урок - ура!
Привет. У вас слишком много запутанных концепций о React, поэтому ответы на ваши вопросы на самом деле не принесут вам пользы. Вам будет полезнее ознакомиться с официальной документацией и пройти «быстрый путь» здесь: reactjs.org/docs/components-and-props.html.