на setState визуализировать новый компонент

Question

У меня есть аналоговые часы, использующие

https://github.com/zackargyle/react-analog-clock

У меня есть текстовое поле, которое выбирает название города и часовой пояс при автозаполнении,

• Часы по умолчанию2 загружены со смещением + 8
• При выборе города в текстовом поле
• Выбор названия города
• Выбор часового пояса
• Повторное отображение часов2

Как я могу это кодировать?

 public render(): React.ReactElement<Props> {
    return (
 <div className={styles.time}>
            <AnalogClock theme={Themes.light} width={120} gmtOffset=${this.state.gmtoffset} /><br/>
            {this.state.wxLoc}

 </div>
);

Я попытался

this.showClock2(this.state.gmtoffset);
////////////////////////

private showClock2(offset="+8"){
  let show=`<AnalogClock theme={Themes.light} width={120} gmtOffset=${offset} /><br/>
  {this.state.wxLoc}`;
  return show;

}
//other codes

public render(): React.ReactElement<Props> {
    return (
 <div className={styles.time}>
            {this.showClock2()}

 </div>
);

, он показывает буквальный код, возможно ли сделать <AnalogClock/>?

Answer 1

private showClock2(offset="+8") {

 ReactDOM.render(<AnalogClock theme={Themes.light} width={120} gmtOffset={offset} />, document.getElementById('root'))


}

Добавьте в публикацию c рендер и он работает