На главную Наши проекты:
Журнал   ·   Discuz!ML   ·   Wiki   ·   DRKB   ·   Помощь проекту
ПРАВИЛА FAQ Помощь Участники Календарь Избранное RSS
msm.ru
Модераторы: ElcnU, ANDLL, fatalist
  
> ReactDOM.render , Непонятки
    Ну вот пишу
    ExpandedWrap disabled
      import React, { useState } from 'react';
      import { render } from 'react-dom';
       
      const App = props => {
          const [text, setText] = useState(props.text);
       
          const handleTextChange = event => {
              setText(event.target.value);
          };
       
          return (
              <div>
                  <input value={text} onChange={handleTextChange} />
              </div>
          );
      };
       
      render(<App text="Hello" />, document.querySelector('#root'));
      render(<App text="World" />, document.querySelector('#root'));

    В итоге в броузе значение input по-прежнему "Hello"! :wacko:
      Разобрался :D

      Дело в том, что повторный вызов рендер того же компонента не удаляет предыдущий экземпляр компонента, а обновляет. Ну а поскольку обновление компонента происходить только при изменении состояния, а оно не изменилось, то и ничего не перерисовывается.

      Как же его обновить?

      Надо отследить получение нового свойства и изменить состояние. Изменение состояния приведет к перерисовке компонента. Для этого юзаем новый хук useEffect
      ExpandedWrap disabled
        import React, { useState, useEffect } from 'react';
         
        const App = props => {
            const [text, setText] = useState(props.text);
         
            const handleTextChange = event => {
                setText(event.target.value);
            };
         
            useEffect(() => setText(props.text), [props.text]);
         
            return (
                <div>
                    <input value={text} onChange={handleTextChange} />
               </div>
            );
        };

      Все терь чики-пуки :D
      0 пользователей читают эту тему (0 гостей и 0 скрытых пользователей)
      0 пользователей:


      Рейтинг@Mail.ru
      [ Script execution time: 0,0191 ]   [ 15 queries used ]   [ Generated: 28.03.24, 08:01 GMT ]