React组件render内使用if/else导致元素绑定JS函数失效怎么解决？

你的问题核心不是componentDidMount触发时机异常，而是两个错误用法共同导致的事件绑定失效：

1. 你通过拼接HTML字符串再用parse渲染下拉框的操作，会破坏React的虚拟DOM diff逻辑，当modalities加载完成调用setState触发重渲染时，React会重建相关的DOM节点，导致之前绑定在#autodate节点上的jQuery插件事件被销毁。
2. 你注释了if/else分支里的return语句，所以实际render始终会返回完整的表单结构，你的猜测并不成立，componentDidMount只会在组件首次挂载完成后触发一次，不存在触发时机不确定的问题。

1. 替换HTML字符串拼接为React原生JSX渲染 #

这是最核心的修改，让React只更新下拉框对应的DOM节点，不会触及日期相关的DOM，保留已经绑定的插件事件：
把render方法里的下拉框逻辑修改为：

render() {
  const {error, isLoaded, items} = this.state.modalities;
  let modalityContent;
  if (error) {
    modalityContent = <div>加载失败：{error.message}</div>;
  } else if (!isLoaded) {
    modalityContent = <div>加载模态选项中...</div>;
  } else {
    modalityContent = (
      <select id="modality" name="search[modality]" onChange={this.handleChange}>
        {items.map(item => (
          <option key={item} value={item}>{item}</option>
        ))}
      </select>
    );
  }

  return (
    <div className={'main-theme tools_screen'}>
      <form method="post">
        <div className="search-form-layout">
          <fieldset>
            <div className="field"><label htmlFor="start_date">Start Date</label><input type="date"
                                                                                        id="start_date"
                                                                                        name="search[start_date]"/>
            </div>
            <br/>
            <div className="field"><label htmlFor="end_date">End Date</label><input type="date"
                                                                                    id="end_date"
                                                                                    name="search[end_date]"/>
            </div>
            <div id="autodate"/>
          </fieldset>
        </div>

        <div className="search-form-layout">
          <div className="field"><label htmlFor="patient_name">Last Name</label><input type="text"
                                                                                       id="patient_name"
                                                                                       name="search[patient_name]"/>
          </div>
          <br/>
          <div className="field"><label htmlFor="modality">Modality</label>
            {modalityContent}
          </div>
          <br/>
          <br/>
          <div className="field">
            <button>Search</button>
          </div>
        </div>
      </form>
      <div id="search_results">
        {this.getSearchResults()}
      </div>
    </div>
  );
}

2. 补充jQuery插件绑定的兼容逻辑 #

如果修改后还是偶现失效，可以把插件初始化逻辑抽成公共方法，在组件挂载和更新后都调用，同时使用ref替代全局id选择器避免冲突：
首先给autodate节点加ref：

<div id="autodate" ref={el => this.autodateEl = el} />

然后抽离初始化方法：

initAutoDate() {
  $(this.autodateEl).autodate({ 
    start_date: $('#start_date'), 
    end_date: $('#end_date') 
  });
}

在componentDidMount和componentDidUpdate中调用：

componentDidMount() {
  this.initAutoDate();
  this.getModalities();
}

componentDidUpdate() {
  // 确保节点存在再初始化
  if (this.autodateEl) {
    this.initAutoDate();
  }
}

3. 补充this绑定 #

注意你的handleChange方法如果没有在constructor中绑定this，调用时会报错，可以直接改成箭头函数定义：

handleChange = (event) => {
  this.setState({value: event.target.value});
}

尽量不要在React项目中混用jQuery直接操作DOM，React自身会通过虚拟DOM管理真实节点，外部修改DOM很容易出现状态不一致、事件丢失、内存泄漏等问题。如果必须使用jQuery插件，建议把插件封装为独立的React组件，在组件的生命周期方法中统一处理初始化和销毁逻辑。

内容的提问来源于stack exchange，提问作者J.T.