日期选择器不适用于反应路由器子代（直到刷新）答案

【问题标题】：Datepicker not working on react router childs (until refresh)日期选择器不适用于反应路由器子代（直到刷新）
【发布时间】：2017-01-11 03:15:12
【问题描述】：

我遇到了 react 路由器的问题，其中子路由器有一个带有 datepicker(semantic-ui-calender) 的组件表单和一个来自 semantic-ui 的默认下拉列表。

问题是：通过输入子路由，这些样式不起作用，仅显示下拉菜单的默认选择选项，而 datepicker 现在只是一个输入。如果我刷新页面，它们正在工作。

这里是路由器部分

<Route path="/examination" component={Examination}>
        <IndexRoute component={Add_new_schedule}/>
        <Route path="/examination/AddNewSchedule" component={Add_new_schedule} />
        <Route path="/examination/AddExam" component={Add_exam} />
</Route>

这是下拉菜单

<div className="exam_class_section">
              <select className="ui dropdown">
                <option value>Section</option>
                <option value="A">A</option>
                <option value="B">B</option>
              </select>
</div>

这里是日期选择器（Semantic-UI-Calender），带有日期、时间从、时间到

<div className="exam_date_time_box">
            <div id="exam_date" className="ui calendar">
              <div className="ui left icon input">
                <input
                  type="text"
                  placeholder="Examination Date" />
                <i className="calendar icon" />
              </div>
            </div>
            <div className="exam_time_box">
              <div id="time_from" className="ui calendar">
                <div className="ui input left icon">
                  <i className="time icon" />
                  <input type="text" placeholder="Time From" />
                </div>
              </div>
              <div id="time_to" className="ui calendar">
                <div className="ui input left icon">
                  <i className="time icon" />
                  <input type="text" placeholder="Time To" />
                </div>
              </div>
            </div>
          </div>

谢谢

【问题讨论】：

标签： jquery-ui reactjs datepicker react-router semantic-ui

【解决方案1】：

我得到了这个问题的解决方案。

问题是因为外部 js 文件不会在 react-router 中加载。

解决方案是通过将loadjs库加载到需要的特定组件页面中来加载外部js文件

import loadjs from 'loadjs' 并在 componentWillMound() 生命周期方法中调用

componentWillMount() {
loadjs('/js/main.js');
},

【讨论】：