Javascript ReactJS+；React Router：如何引用特定对象作为属性传递？

我现在有一个表格，每个单元格都有一个按钮。单击按钮后，根据特定的日期（星期一或星期二）、类别（类别1或类别2）和名称（Kev或Josh），如何将表中与该特定按钮相关的对象推送到新页面？使用ReactJS+React路由器，正确的方法是什么

当导航到新页面时，新页面将用传入的对象的类信息填充一个表，这些信息与单击的按钮单元格相关

代码：

表行数据的结构应该是这样的，并根据ID引用对象，如下面所示，还是更好的结构--是否根据单元格位置定位特定的ID对象（考虑日期、名称和类号）

例如，如果Kev在“星期一”列中的行class1希望将以下内容传递到下一页：

class1: {
  id: 0,
  classTitle: abc,
  number: class1,
  info: {
    time: 1,
    classSize: 2,
  }
}

---

将接受并投票表决答案。提前感谢

这就是像这样的集中式状态管理工具派上用场的地方。您可以调度一个动作（类似于

选择_CLASS

），在存储中设置所选的类，然后从新组件中读取该值。我推荐这种方法

然而，还有另一种方法。每个浏览器历史记录条目都有一个

状态

的概念。因此，当导航到新管线时，可以将选定数据保存为该历史记录条目的状态，然后在组件渲染时读取该数据。它看起来像这样：

// First argument is mapStateToProps, the second is mapDispatchToProps
// https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
export default connect((state) => state, { selectClass } )(YourComponent);

保存状态：

router.push({
  to: '/path',
  state: class1
});

阅读：

router.location.state

反应路由器文档：

更新：是的！因此，首先，让我们为此定义action+action创建者：

export const SELECT_CLASS = 'SELECT_CLASS';
export const selectClass = (class) => {
  return {
    type: SELECT_CLASS,
    class,
  }
};

现在，让我们看看处理此问题的减速器是什么样子的：

import { SELECT_CLASS } from '/path/to/action'

const selectedClass = (
  state={},
  action
) => {
  switch (action.type) {
    case SELECT_CLASS:
      return action.class;
    default:
      returns state;
  }
};

现在，假设您已经通过react redux连接了组件，如下所示：

// First argument is mapStateToProps, the second is mapDispatchToProps
// https://github.com/reactjs/react-redux/blob/master/docs/api.md#connectmapstatetoprops-mapdispatchtoprops-mergeprops-options
export default connect((state) => state, { selectClass } )(YourComponent);

以下是设置所选类的方式：

  // Wherever you need to navigate
  function eventHandler(e) {
    const { selectClass } = this.props;
    selectClass(class1);
    router.push('/next/location');
  }

在下一个组件中（该组件也应连接，但不需要

mapDispatchToProps

）：

render() {
  const { selectedClass } = this.props;
  // do what you need with the class.
}

如果您需要帮助设置react+redux，那么这些文档非常棒。如果我使用的ES6语法看起来不熟悉，那么最好参考babel文档

更新2：我拿走了你的小提琴并用它运行：。每个按钮都有一个单击事件，它将获得正确的对象

最后更新：这里是

handleClick

handleClick(e) {
    const classTitle = e.target.innerHTML;
    let obj = undefined;
    data.forEach((schedule) => {
      ['monday', 'tuesday'].forEach((day) => {
        const classes = schedule[day];
        return Object.keys(classes).forEach((c) => {
            const cls = classes[c];
            if (cls.classTitle === classTitle) {
            obj = cls;
          }
        });
      })
    });

    if (obj) {
      // do your navigation here
    }
  }

首先，我们使用

forEach

对包含所有日程安排的数组

数据进行迭代。然后，我们每天进行迭代（目前只有
周一
和
周二
）然后，由于我们不知道所有类的名称，我们只需要获取所有键（即类名）最后，我们可以得到实际的类对象，并检查
classTitle
是否与单击的对象匹配。如果匹配，我们将该对象保存到
obj
。最后，我们确保找到了匹配的对象，然后做任何必要的事情来正确处理该单击。这非常混乱，但是必要的根据您的数据结构，我建议尝试以更为相关的方式存储此数据，并分别存储每种类型的项目（例如，
用户
，
类
，
天数
，以及
计划
对象，所有这些对象都位于单独的数组中，并使用ID将它们链接在一起）

为了解决您对某些
classTitle
s将是相同的担忧，您还必须找出谁的日程安排被点击（可能是被点击的日期）。您可以通过多种方式来实现这一点：为每个按钮添加
data user
属性，并在点击时获取该属性，实现“选定用户”的概念，创建一个新组件（可能称为
UserSchedule
），它呈现该表中的一行，并将该用户的类作为道具。这样，您就会知道匹配的任何类都属于该用户。就像我说的：有很多种方式

至于向您展示如何将其传递到新组件，我在上面演示了两种方法：通过历史状态或将值存储在redux reducer中并将其作为道具接收。再这样做就等于我为您解决了整个问题，我不打算这样做，因为这东西的唯一坚持方式是为您你自己去做。相信你自己，按照我给你的建议去做，使用互联网来查找你遇到的任何特定的bug，你会脱颖而出的！
我实际上是在使用redux。在我接受答案和投票之前，你介意展示一个完整的周期吗，因为我已经在这上面呆了很长时间了。你首先怎么做找到你要传递给道具的确切道具？如果你能引用我的实际代码会更清楚。我理解这个循环，但我不知道我应该如何在道具中瞄准要传递的特定对象。如果你能在你的示例中使用我的实际道具和提供的代码，这将非常有意义。例如，如果单击按钮
abc
，希望传递对象：
class1:{id:0，classTitle:abc，number:class1，info:{time:1，classSize:2，}
。那么我如何定位这个特定的对象呢？你介意简要介绍一下handleClick中发生了什么吗？并举例说明如何将找到的特定对象推到新页面上？@taylorc93认为执行
const classTitle=e.target。innerHTML
会给出一个问题，因为另一个classTitle与e相同。@taylorc93是的，将有具有相同的
classTitle
的案例