Question

我遇到了一个需要将任务对象输出到表中的问题。我已创建状态列（新建，待办事项，正在进行等），但我不知道如何将我的任务输出到特定的表格单元格中，具体取决于其状态以及是否有两个具有相同状态的任务对象然后换另一个我想创建一个单独的行，这样他们就不会在同一个单元格内。

不幸的是，我无法提供任何代码示例，因为我已经尝试了很多方法，但没有一个能够工作。我现在就是这样做的，但它并不像我需要的那样工作。

            <div className="taskboard">
            <table className="table" id={'board_'+this.amount}>
                <tbody>
                    <tr>
                        <th className="0">Story</th>
                        <th className="1">New</th>
                        <th className="2">To do</th>
                        <th className="3">Pending</th>
                        <th className="4">In progress</th>
                        <th className="5">Internal Review</th>
                        <th className="6">Customer Review</th>
                        <th className="7">Done</th>
                        <th className="8">Reject</th>
                    </tr>
                    <tr>
                        {this.tasks.map((task, i) => <td key={i}><Task task={task}/></td>)}
                    </tr>
                </tbody>
            </table>
        </div>

Answer 1

这是怎么回事？我们的想法是，为每个任务创建一个

class LeadContact(models.Model):
    status = models.CharField(max_length=10, 
                                  choices=LeadContactConstants.STATUSES,
                                  default=LeadContactConstants.STATUS_PRISTINE)

，然后在其中根据任务的状态决定是否在

class LeadContactConstants(object):
    STATUS_PRISTINE = "PRISTINE"
    STATUS_CONTACTED = "CONTACTED"
    STATUS_QUALIFIED = "QUALIFIED"
    STATUS_CLIENT = "CLIENT"

    STATUSES = ((STATUS_PRISTINE, "Virgin"),
                (STATUS_CONTACTED, "Contacted"),
                (STATUS_QUALIFIED, "Qualified"),
                (STATUS_CLIENT, "Client"))

内显示<tr/>等待，等等。）

＆＃13;

<Task />

＆＃13;

最终你可以将整个<td />重构为一个接收任务对象的新组件，并显示一个包含相关单元格的行

Answer 2

这也可以用一点div-css样式呈现。

这是ReactJS的一个工作小提琴。希望这会有所帮助。

JSFiddle

var data = {
  "new_item": ['Story 10', 'Story 11'],
  "to_do": ['Story 1', 'Story 5'],
  "pending": ['Story 2', 'Story 3', 'Story 7'],
  "in_progress": ['Story 4', 'Story 6', 'Story 8', 'Story 9']
};
var Container = React.createClass({
  render() {
    return <div className='divTableBody'>
      < StatusColumn name = 'New'
      id = 'new_item' ></StatusColumn>< StatusColumn name = 'To Do'
    id = 'to_do' > < /StatusColumn> < StatusColumn name = 'Pending'
    id = 'pending' > < /StatusColumn> < StatusColumn name = 'In Progress'
    id = 'in_progress' > < /StatusColumn> < /div > ;
  }
});

var StatusColumn = React.createClass({
      render() {
      var _this = this;
        var items = [];
        for( var item in data){
                  data[item].map(function(x) {
                  if(item === _this.props.id)
                      items.push(<div className='divTableCell'>{x}</div>);
                      })


        }

          return <div className='divTableRow'> 
          <div className='divTableHeading'>{this.props.name}</div>
          <div>{items}</div>
           < /div>
        }
      });

    ReactDOM.render( < Container / > , document.getElementById('root'));

显示＆＃34;任务＆＃34;在特定的表格单元格中取决于状态。 ReactJS

2 个答案: