Question

我正在设计一个按周计算的约会时间表，我对rails应用程序的反应。完成后应该看起来像这样：

根据约会的状态，彩色框将是引导类。它们应该是各个约会节目页面的链接（我知道我还没有完成这个，这不是我目前主要关注的问题）。

以下是我在JSON中使用的数据结构：

{
  "clients": [
    {
      "id": 2,
      "name": "Oscar",
      "appointments": [
        {
          "id": 2,
          "status": "Not Done",
          "report": "Not Started",
          "start": "2017-09-24T12:06:19.000Z",
          "finish": "2017-09-24T12:36:19.000Z",
          "scheduled": "2017-09-24T12:09:19.000Z",
          "duration": null
        },
        {
          "id": 3,
          "status": "Not Done",
          "report": "Not Started",
          "start": "2017-09-18T13:07:56.000Z",
          "finish": "2017-09-18T13:37:56.000Z",
          "scheduled": "2017-09-18T13:10:56.000Z",
          "duration": null
        }
      ],
      "url": "http:\/\/localhost:3000\/clients\/2.json"
    },
    {
      "id": 3,
      "name": "Molly",
      "appointments": [
        {
          "id": 4,
          "status": "Not Done",
          "report": "Not Started",
          "start": "2017-09-21T11:09:31.000Z",
          "finish": "2017-09-21T11:39:31.000Z",
          "scheduled": "2017-09-21T11:12:31.000Z",
          "duration": null
        }
      ],
      "url": "http:\/\/localhost:3000\/clients\/3.json"
    }]}

Appointments.js.coffee

@Appointments = React.createClass

getInitialState: ->
    clients: @props.clients

  getDefaultProps: ->
    clients: []

  render: ->
    React.DOM.div
      className: 'client-appts'
      React.DOM.h2
        className: 'title'
        'Clients Title'
      React.DOM.table
          className: 'table table-bordered'
          React.DOM.thead null,
            React.DOM.tr null,
              React.DOM.th null, 'Client'
              React.DOM.th null, 'col 2'
              React.DOM.th null, 'col 3'
          React.DOM.tbody null,
            for client in @state.Clients
              React.createElement Client, key: client.id, client: client

这是我的client.js.coffee

@Client= React.createClass
  render: ->
      React.DOM.tr null,
        React.DOM.td null, @props.client.name
        for appointment in @props.client.appointments
          React.createElement Appointment, key: appointment.id, appointment: appointment

这是我的约会.js.coffee

@Appointment = React.createClass
    render: ->
      React.DOM.td null,
        React.DOM.p null, @props.appointment.status
        React.DOM.p null, @props.appointment.report

我知道轨道没问题，但我很反应。如何设计结构，以便约会只在它们应该出现时显示。一旦我弄明白，我需要弄清楚如何点击不同周的页面。如何设计反应组分？有人在S / O或G / H上看到另一个很好的例子吗？

设计每周日历并在轨道上做出反应

0 个答案: