在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'))


}

添加公共渲染即可使用