У меня есть внешний (для компонента) наблюдаемый объект, за изменениями которого я слежу. Когда объект обновляется, он эмиттит событие, и я хочу ре-рендерить компонент, когда он это событие «услышит».
С React.render верхнего уровня это было возможно, но внутри компонента он не работает (что имеет некий смысл, так как метод render просто возвращает объект).
Вот пример кода:
export default class MyComponent extends React.Component { handleButtonClick() { this.render(); } render() { return ( <div> {Math.random()} <button onClick={this.handleButtonClick.bind(this)}> Click me </button> </div> ) } }
Нажатие на кнопку вызывает this.render(), но это не то, что на самом деле вызывает рендеринг (это понятно, потому что текст, созданный с помощью {Math.random()}, не изменяется). Но, если я просто вызываю this.setState() вместо this.render(), он отлично работает.
В общем, вопрос такой: обязательно ли для компонентов React иметь state, чтобы выполнить re-render? Есть ли способ заставить компонент рендериться по требованию без изменения state?
Можно в компоненте вызвать this.forceUpdate(), для принудительного ре-рендеринга
подробнее - здесь