React同一页面重复渲染TimeRangePicker组件异常求助

可能的原因及修复方案 #

1. 给每个TimeRangePicker实例分配独立ID #

不少第三方组件会依赖唯一DOM ID完成初始化或事件绑定，多个实例共用默认ID会引发冲突。修改你的组件，给每个TimeRangePicker传递独立的id属性：

import React, { Component } from 'react';
import TimeRangePicker from 'react-time-range-picker';

export default class TimeRange extends Component {

  pickerupdate = (start_time, end_time) => {
    console.log(`start time: ${start_time}, end time: ${end_time}`)
  }

  render() {
    // 基于props传入的id生成唯一picker ID
    const pickerId = `time-range-picker-${this.props.id}`;
    return (
      <div style={{marginBottom:"60px"}}>
          <TimeRangePicker 
            id={pickerId}
            hourmarkers 
            hourlines 
            markercolor="black" 
            key={this.props.id} 
            timeupdate={this.pickerupdate}
          />
      </div>
    );
  }
}

父组件渲染时确保传入的id唯一：

// 父组件代码示例
<TimeRange id="picker-1" />
<TimeRange id="picker-2" />

2. 手动触发组件初始化（针对全局状态冲突） #

如果第三方组件内部维护了全局状态，导致多实例冲突，可通过ref手动触发初始化（若组件提供对应方法）：

import React, { Component, createRef } from 'react';
import TimeRangePicker from 'react-time-range-picker';

export default class TimeRange extends Component {
  pickerRef = createRef();

  pickerupdate = (start_time, end_time) => {
    console.log(`start time: ${start_time}, end time: ${end_time}`)
  }

  componentDidMount() {
    // 检查组件是否有初始化方法，例如init()
    if (this.pickerRef.current && typeof this.pickerRef.current.init === 'function') {
      this.pickerRef.current.init();
    }
  }

  render() {
    const pickerId = `time-range-picker-${this.props.id}`;
    return (
      <div style={{marginBottom:"60px"}}>
          <TimeRangePicker 
            ref={this.pickerRef}
            id={pickerId}
            hourmarkers 
            hourlines 
            markercolor="black" 
            key={this.props.id} 
            timeupdate={this.pickerupdate}
          />
      </div>
    );
  }
}

3. 隔离样式避免覆盖 #

部分第三方组件的全局样式选择器可能导致后续实例样式异常，可通过包裹容器的独立类名隔离样式：

/* 全局样式文件 */
.time-range-wrapper-1 .react-time-range-picker {
  /* 自定义该实例的样式 */
}
.time-range-wrapper-2 .react-time-range-picker {
  /* 自定义该实例的样式 */
}

组件中给容器添加对应类名：

render() {
  const wrapperClass = `time-range-wrapper-${this.props.id}`;
  const pickerId = `time-range-picker-${this.props.id}`;
  return (
    <div className={wrapperClass} style={{marginBottom:"60px"}}>
        <TimeRangePicker 
          id={pickerId}
          hourmarkers 
          hourlines 
          markercolor="black" 
          key={this.props.id} 
          timeupdate={this.pickerupdate}
        />
    </div>
  );
}

4. 调整组件版本 #

若上述方法均无效，大概率是组件本身存在多实例兼容bug。可查看该组件的GitHub issues确认是否有同类问题，尝试降级或升级到稳定版本。

内容的提问来源于stack exchange，提问作者Newbie_developer