Как перерендерить компонент в react.js?

Пользователь

от fred , в категории: JavaScript , год назад

Как перерендерить компонент в react.js?

Facebook Vk Ok Twitter LinkedIn Telegram Whatsapp

1 ответ

Пользователь

от lamar , год назад

@fred 

Для перерендеринга компонента в React.js необходимо изменить его состояние или пропсы. React будет автоматически обнаруживать эти изменения и вызывать методы жизненного цикла компонента для перерендеринга.


Если вы хотите изменить состояние компонента, вы можете использовать метод setState() внутри вашего компонента. Например, если у вас есть классовый компонент, вы можете изменить состояние следующим образом:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
class MyComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = { count: 0 };
  }

  handleClick() {
    this.setState({ count: this.state.count + 1 });
  }

  render() {
    return (
      <div>
        <p>You clicked {this.state.count} times</p>
        <button onClick={() => this.handleClick()}>
          Click me
        </button>
      </div>
    );
  }
}


В этом примере каждый раз, когда пользователь кликает на кнопку, вызывается метод handleClick(), который изменяет состояние count, и это приводит к перерендерингу компонента, который обновляет количество кликов на экране.


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

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
function MyList(props) {
  const { items } = props;

  return (
    <ul>
      {items.map(item => (
        <li key={item.id}>{item.text}</li>
      ))}
    </ul>
  );
}

ReactDOM.render(
  <MyList items={myNewItems} />,
  document.getElementById('root')
);


В этом примере, при вызове ReactDOM.render(), мы передаем новый массив myNewItems в качестве пропса items для компонента MyList, что приведет к перерендерингу компонента с новыми элементами списка.