2つのデータを1つにマージして新しいテーブルを作成する - Javascript/ReactJs

Question

以下に述べる 'SectionText'の形式のデータがあり、そのデータに基づいてテーブルを作成できます。しかし今比較のために、私は 'SectionTextTwo'として最初の同じフォーマットで別のデータを持っているが、今私は両方のデータを1つのテーブルに以下のようにマージする必要があります。私はデータを1つにマージまたは結合してテーブルとして表示する方法について混乱しています。どんな入力も高く評価されます。ありがとう。

SectionText = Node\t MB-s (rec) \tMB-s (sent)\n172.22.1.91\t30.4549\t30.5486\n172.22.1.92\t30.736\t30.5485\n 


    var sectionRows = sectionText.split("\n"); 
    {sectionRows.map((currRow) => { 
        if (currRow.length > 0) { 
         var fields = currRow.split("\t"); 

         return (
          <TableRow> 
          {fields.map((currField) => { 
           return (
            <td>{currField}</td> 
           ) 
          })} 
          </TableRow> 
         ) 

        } 
       })} 


Node  MB-s (rec) MB-s (sent) 
172.22.1.91 30.4549  30.5486 
172.22.1.92 30.736  30.5485 


SectionTextTwo = Node\t MB-s (rec) \tMB-s (sent)\n172.22.1.91\t30.4549\t30.5486\n172.22.1.92\t30.736\t30.5485\n 

Required table : 

Node  MB-s (rec)  MB-s (sent) Node   MB-s (rec)  MB-s (sent) 
172.22.1.91 30.4549  30.5486 172.22.1.91 30.4549  30.5486 
172.22.1.92 30.736  30.5485 172.22.1.92 30.736  30.5485 

Answer 1

問題が完全にわかっているかどうかはわかりません。しかし、私は、あなたがテーブルを構築するためのコンポーネントを作成することができることを推測する、のようなもの：https://jsfiddle.net/69z2wepo/69404/

// Table component 
const buildRow = (row) => (
    <tr>{row.map((item) => <td>{item}</td>)}</tr> 
); 

const Table = ({ items }) => (
    <table>{items.map(buildRow)}</table> 
); 


// Usage 
const SectionText = "Node\t MB-s (rec) \tMB-s (sent)\n172.22.1.91\t30.4549\t30.5486\n172.22.1.92\t30.736\t30.5485\n"; 
const SectionTextTwo = "Node\t MB-s (rec) \tMB-s (sent)\n172.22.1.91\t30.4549\t30.5486\n172.22.1.92\t30.736\t30.5485\n"; 

const sectionRows = SectionText.split("\n").map(row => row.split('\t')); 
const sectionRowsTwo = SectionTextTwo.split("\n").map(row => row.split('\t')); 

// As separate tables 
ReactDOM.render(
    <div><Table items={sectionRows} /> <br/> <Table items={sectionRowsTwo} /> </div>, 
    document.getElementById('container_1') 
); 

// As a single table 
const sectionRowsMerged = sectionRows.concat(sectionRowsTwo.slice(1, sectionRowsTwo.length)); 
ReactDOM.render(
    <Table items={sectionRowsMerged} />, 
    document.getElementById('container_2') 
); 

は、基本的に最初のあなたは離れて、アレイを構築するロジックから単に抽象はのレンダリングに焦点を当てるコンポーネントを作成しますデータ。次に、それを使用して書式設定されたデータを渡すことができます。

2つのテーブルが必要な場合は、そのコンポーネントを2回レンダリングするだけです。単一のテーブルが必要な場合は、最初の行を除く配列をマージし、テーブルコンポーネントを呼び出します。