javascript - ReactJS + react 路由器 : How to reference a specific object to pass down as properties?

Question

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

一旦导航到新页面，新页面就会用传入对象的类信息填充一个表，与单击的按钮单元格相关。

代码:

http://jsfiddle.net/k7wbzc4j/16/

表行数据是否应该像这样构造并根据 ID 引用对象，如下所示，或者更好的结构 - 希望根据单元格位置(日期，名称)定位特定的 id 对象，并考虑类(class)编号)？

list: [
  {
    name: Kev
      monday: {
        class1: {
          id: 0,
          classTitle: abc,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class 2: {
          id: 1,
          classTitle: def,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
      tuesday: {
        class1: {
          id: 2,
          classTitle: ghi,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class 2: {
          id: 3,
          classTitle: jkl,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
  },

  {
    name: Josh, 
      monday: {
        class1: {
          id: 4,
          classTitle: mno,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class2: {
          id: 5,
          classTitle: pqr,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
      tuesday: {
        class1: {
          id: 6,
          classTitle: stu,
          number: class1,
          info: {
            time: 1,
            classSize: 2,
          }
        },
        class2: {
          id: 7,
          classTitle: vwx,
          number: class2,
          info: {
            time: 1,
            classSize: 2,
          }
        }
      },
    }
  }
]

例如，如果 Kev 的行在 Monday column，class1，想将以下 props 传递给下一页:

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

将接受并赞成答案。提前谢谢你

Answer 1

这是集中式状态管理工具，如 redux派上用场。您可以分派(dispatch)一个操作(类似于 SELECT_CLASS)来设置商店中的所选类，然后从您的新组件中读取该值。我推荐这种方法。

不过，还有另一种方法。每个浏览器历史条目都有一个state 的概念。因此，当您导航到新路线时，您可以将所选数据保存在该历史记录条目的状态中，然后在组件呈现时读取它。它看起来像这样:

保存状态:

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

阅读:

router.location.state

React 路由器文档:https://github.com/ReactTraining/react-router/blob/master/docs/API.md#pushpathorloc

更新:对 redux 赞不绝口!所以首先，让我们为此定义 action + action creator:

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

现在，让我们看看处理这个问题的 reducer 会是什么样子:

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 时需要任何帮助，文档 here太棒了。如果我使用的 ES6 语法看起来不熟悉，一个很好的引用是 babel 文档 here

更新 2:我拿了你的 fiddle 并用它运行:http://jsfiddle.net/k7wbzc4j/17/ .每个按钮都有一个点击事件，它将获得正确的对象。

最终更新:下面是 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 遍历包含所有计划的数组 data。然后，我们遍历每一天(目前只有 monday 和 tuesday)以获取当前时间表当天的所有类(class)。然后，由于我们不知道所有类的名称，我们只需获取所有键(即类名)并迭代这些键。最后，我们可以获得实际的类对象并检查 classTitle 是否与被单击的对象匹配。如果是这样，我们将该对象保存到 obj。最后，我们确保我们找到了一个匹配的对象，然后做任何必要的事情来正确处理该点击。这很困惑，但考虑到您的数据结构是必要的。我建议尝试以更相关的方式存储此数据并分别存储每种类型的项目(例如 Users、Classes、Days、和 Schedules 对象都在单独的数组中，id 将它们链接在一起)

为了解决您担心某些 classTitle 会相同的问题，您还必须弄清楚谁的日程被点击(可能还有被点击的日期)。您可以通过多种方式做到这一点:向每个按钮添加一个 data-user 属性并在单击时获取它，实现“选定用户”的概念，创建一个新组件(可能称为 UserSchedule) 在该表中呈现一行并将该用户的类作为 Prop 。这样，您就会知道任何匹配的类都属于该用户。就像我说的:有多种方式。

至于向您展示如何将其传递给新组件，我已经在上面演示了两种方法:通过历史状态或将值存储在 redux reducer 中并将其作为 props 接收。做更多就等同于我为你解决了整个问题，我不会这样做，因为这些东西坚持下去的唯一方法就是你自己做。相信自己，听从我给出的建议，并使用互联网解决您遇到的任何特定错误，您将脱颖而出!