1

我有两个日历，例如议程，有一个图标日历按钮，当我点击它时，它将被重定向到另一个日历(Planning)，这些日历是用react-big-calendar开发的，我想在导航时例如在一周的juin 17 - 23议程，我点击图标日历，它将被重定向到juin 17 - 23计划。

我的代码是：https ://codesandbox.io/s/m7k904y3o8

我尝试用 发送日期getWeek()，但它不起作用。

我该如何解决？

4

2 回答 2

2

你应该使用一些状态管理库

我的第一个建议是使用 Redux，因为该库可以很好地处理此类情况。您想在不相关的组件之间传递一些数据。在这里拥有一个状态对象会很好地为您服务。

第二个（更容易/更快）选项是将一些状态管理添加到父组件（这称为容器）。您可以将一些状态传递给每个孩子以及您可以从孩子触发的 setter 函数。

作为容器的 App 组件示例

import React, { Component } from "react";
import autobind from 'autobind-decorator';
import { Route, Link, Switch, Redirect } from "react-router-dom";
import Agenda from "./Agenda";
import Planning from "./Planning";
class App extends Component {
  state = {selectedDate: Date.now()}

  @autobind
  setActiveDate (dateToSet) {
    this.setState({selectedDat: dateToSet});
  }
  /*---------------------------------------------------- Rendu -----------------------------------------------------------------*/
  render() {
    return (
      <div>
        <Switch>
          <Route exact path="/" render={(props) => <Agenda {...props} setActiveDate={setActiveDate} selectedDate={this.state.selectedDate} />} />
          <Route exact path="/planning" render={(props) => <Planning {...props} selectedDate={this.state.selectedDate} />}/>
        </Switch>
      </div>
    );
  }
}

export default App;

一些注意事项

  • 首先，您不希望您的主应用程序组件以这种方式用作容器，因此请制作另一个组件来处理此状态管理
  • 使用autobind装饰器是为了更容易编写，如果你愿意，你可以在构造函数中绑定你的函数
  • 该组件只显示故事的一半，另一半在您的子组件中，您需要从这里读取日期并从子组件触发功能setActiveDate（议程）

结论

这种方法比 redux 实现更会污染你的组件。但它比完整的 redux 设置更快。试着记住“单一责任主体”。

于 2019-05-06T11:23:22.270 回答
2

您可以添加其他数据，然后这些数据将在组件的propthis.props.history.push中可用。例如，如果您想查看 1995 年 12 月 20 日的那一周：locationPlanning

// Agenda.js: Routing to "/planning"

this.props.history.push("/planning", { date: new Date(1994, 11, 19, 0, 0)})

// Planning.js

constructor(props) {
    super(props); //Important

    this.state({
        /* ... */
        dateWeek: this.props.location.state && this.props.location.state.date
    });
}

// Following is a fix or else you would not get next/previous week.

getThisWeek = (dateWeek) => {
    this.setState({ dateWeek });
}

我推荐的另外两个解决方案是URL parameters和Query parameters。

于 2019-05-07T10:40:47.757 回答