ReactJS + React Router: как ссылаться на конкретный объект для передачи в качестве свойств?

Question

В настоящее время у меня есть таблица, и каждая ячейка имеет кнопку. После нажатия кнопки в зависимости от того дня (понедельник или вторник), класса (класс 1 или класс 2) и имени (Kev или Josh), как я могу нажать объект, связанный с этой конкретной кнопкой в ​​таблице, на новый страница? Используя ReactJS + React Router, какой был бы правильный подход к этому?

И когда после перехода на новую страницу новая страница будет заполнять таблицу информацией класса из переданного объекта, связанного с нажатой кнопкой.

Код:

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

Если данные строки таблицы быть структурировано, как так и ссылки на объект на основе кода, как в следующем, или то, что было бы лучше, структура - хотелось бы найти, что особенно id на основе местоположения ячейки (с учетом дня, имени и номера класса)?

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 в колонке понедельник, class1, хотел бы передать реквизит из следующих на следующей странице:

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

Примет и upvote ответ. Заранее благодарю вас

Answer 1

Здесь вам может понадобиться централизованный инструмент управления государственными органами, такой как redux. Вы можете отправить действие (что-то вроде SELECT_CLASS), которое устанавливает выбранный класс в хранилище, а затем читает это значение из вашего нового компонента. Я бы рекомендовал этот подход.

Однако есть и другой способ. Каждая запись истории браузера имеет концепцию state. Таким образом, когда вы переходите к новому маршруту, вы можете сохранить выбранные данные в состоянии для этой записи истории, а затем прочитать его, когда компонент отображает. Это будет выглядеть примерно так:

Сохранить состояние:

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

Чтобы прочитать:

router.location.state 

Реагировать маршрутизатор документы: https://github.com/ReactTraining/react-router/blob/master/docs/API.md#pushpathorloc

UPDATE: YAY для Redux!Таким образом, во-первых, позволяет определить действие + действия создателя этого:

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

Теперь, если вы имеете подсоединили ваши компоненты с помощью среагировать-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. 
} 

Если вам нужна помощь в настройке срабатывают + Redux, Документах here являются фантастическими. Если синтаксис ES6, который я использовал, выглядит незнакомым, хорошей ссылкой являются документы babel. here

ОБНОВЛЕНИЕ 2: Я взял вашу скрипку и побежал вместе с ней: http://jsfiddle.net/k7wbzc4j/17/. Каждая кнопка имеет событие click, которое получит правильный объект.

FINAL UPDATE: Так вот краткое изложение 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), чтобы получить все классы в этот день для текущего расписания. Тогда, поскольку мы не знаем имена всех классов, мы просто хватаем все ключи (которые являются именами классов) и перебираем их. Наконец, мы можем получить фактические объекты класса и проверить, соответствует ли classTitle тот, который был нажат. Если это так, мы сохраняем этот объект до obj. В самом конце мы гарантируем, что мы нашли подходящий объект, а затем сделаем все, что необходимо для правильной обработки этого щелчка. Это довольно грязно, но необходимо, учитывая вашу структуру данных. Я рекомендую попробовать хранить эти данные немного больше реляционными и хранение каждого типа элемента отдельно (например. Users, Classes, Days и Schedules всех объекты в отдельных массивах с идентификаторами, связывая их вместе)

Чтобы адресовать вашу заботу что некоторые classTitle s будут одинаковыми, вам также придется выяснить, на кого было нажато расписание (и, возможно, день, когда он был нажат). Вы можете сделать это несколькими способами: добавьте к каждой кнопке атрибут data-user и возьмите его за клик, реализуйте концепцию «выбранного пользователя», создайте новый компонент (возможно, он называется UserSchedule), который отображает строку в этой таблице и принимает , как реквизиты, классы пользователя. Таким образом, вы узнаете, что любой класс, который соответствует, принадлежит этому пользователю. Как я сказал: несколько способов.

Что касается отображения того, как передать это новому компоненту, я продемонстрировал 2 способа выше, как это сделать: через состояние истории или сохранение значения в редукционном редукторе и получение его в качестве реквизита. Выполнение большего было бы приравнивать меня к решению всей проблемы для вас, что я не буду делать, так как единственный способ, которым этот материал подходит, - это сделать это самостоятельно. Доверяйте себе, следуйте рекомендациям, которые я дал, и используйте Интернет для любых конкретных ошибок, которые у вас есть, и вы выйдете на первое место!