Question

我遇到了一个使用react路由器的问题，其中子路由器有一个带有datepicker（semantic-ui-calender）的组件形式，以及来自语义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>

这是Datepicker（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>

由于

Answer 1

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

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

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

import loadjs from 'loadjs'并调用 componentWillMound（）生命周期方法

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

Datepicker无法处理反应路由器子节点（直到刷新）

1 个答案: