Datepicker 不适用于反应路由器孩子（直到刷新）

Question

我遇到了 React 路由器的问题，其中 child 路由器有一个带有日期选择器 (semantic-ui-calender) 的组件表单和一个来自 semantic-ui.[=14 的默认下拉列表=]

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

这里是路由器部分

<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)，time-from，time-to

<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>

谢谢

Answer 1

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

问题是因为外部 js 文件不会在 react-router.

中加载

解决方法是通过loadjs库加载外部js文件，导入到需要的特定组件页面

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

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

Datepicker 不适用于反应路由器孩子（直到刷新）

Datepicker not working on react router childs (until refresh)

jquery-ui

datepicker

reactjs

semantic-ui

react-router