ステータスに応じて特定のテーブルセルに「タスク」を表示します。 ReactJS

Question

タスクオブジェクトをテーブルに出力する必要がある問題が発生しました。 ステータスカラム（新規、実行中、進行中など）を作成しましたが、ステータスに応じて特定のテーブルセルにどのようにタスクを出力するのか、同じタスクを持つ2つのタスクオブジェクトがあるかどうかはわかりません私は別の行を作成したいので、彼らは両方が同じセルの内部になることはありません。

残念ながら、私はこれまでに多くの方法で試してみましたが、どれもうまくいきませんので、コードサンプルを提供することはできません。ここで私は今それをやっているが、私が必要とするようには機能しない。

  <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

これはどうですか？タスクのステータス（新規、保留中など）に基づいて、<td />の中に<Task />を表示するかどうかを決めるという考えが、<tr/>という各タスクに対して作成されます。

< 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> 
 
     
 
     {this.tasks.map((task, i) => 
 
     <tr> 
 
      // maybe here insert some cells that are common for all task states. like name, date, etc. 
 
      // then choose which state to put the task into: 
 
      <td> 
 
      { task.status === "New" && 
 
       <Task task={task}/> 
 
      } 
 
      </td> 
 
      <td> 
 
      { task.status === "Pending" && 
 
       <Task task={task}/> 
 
      } 
 
      </td> 
 
      // more <td /> 
 
     </tr> 
 
    ) 
 
     } 
 
     
 
    </tbody> 
 
    </table> 
 
< /div>

結局、あなたはタスクオブジェクトを受け取り、これはまた、ほとんどのdivでレンダリングすることができ、関連する細胞

Answer 2

で行を表示する新しいコンポーネントに全体<tr />をリファクタリングすることができます - 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'));