如何使用Firebase創建動態HTML表格？

Question

我試圖創建一個HTML表格，可以隨着我的用戶使用我的應用程序實時更新Firebase。我真的很努力讓這個工作，我真的不知道從哪裏開始。

基本上，所有需要做的就是創建一個新的表格行，並在用戶與我的應用程序進行交互時實時更新其單元格。

有誰知道任何好的教程，可以指出我在正確的方向嗎？創建HTML表格的代碼示例也很棒！謝謝。

更新： 行！感謝Isaiah Lee，我出去找了一些React的教程。我90％在那裏，但有一個問題，我似乎無法弄清楚...

我能夠更新我的表與新行動態作爲用戶使用我的應用程序，但我不能讓他們填滿數據。我覺得我真的很接近，但我的經驗不足與之反應是抱着我回到這裏......

出於某種原因，這個循環在這裏不與任何數據填充TD的

render() { 
return (
    <div className="App"> 

    <h1>Talkeetna Numbers</h1> 
    <table id="numbers"> 
     <tbody> 
     <tr> 
      <th>Driver</th> 
      <th>Coach</th> 
      <th>Time</th> 
      <th>Total People</th> 
      <th>AM Train</th> 
      <th>PM Train</th> 
      <th>MEX</th> 
      <th>Employees</th> 
      <th>Seats Left</th> 

     </tr> 

     {this.state.rows.map(row => 
     <tr> 
      <td>{this.state.driver}</td> 
      <td>{this.state.coach}</td> 
      <td>{this.state.time}</td> 
      <td>{this.state.totalPeople}</td> 
      <td>{this.state.amTrain}</td> 
      <td>{this.state.pmTrain}</td> 
      <td>{this.state.THEMEX}</td> 
      <td>{this.state.Employees}</td> 
      <td>{this.state.seatsLeft}</td> 
     </tr>)} 

    </tbody> 
    </table> 



    </div> 
); 

}

我的繼承人組件功能

componentDidMount() 
{ 
    const logsRef = firebase.database().ref('logs'); 

    logsRef.on('child_added', snap => { 


    this.addRow(snap.getKey()); 
    //rows.push(snap.getKey()); 
    console.log("adding key: ", snap.getKey()); 


    }); 

    console.log("loading rows..."); 

    for(var rowKey = 0; rowKey < this.state.rows.length; rowKey++) 
    { 

     const root = firebase.database().ref().child('logs/' + rowKey); 
     const driverRef = root.child('Driver'); 
     const coachRef = root.child('Coach'); 
     const timeRef = root.child('Time'); 
     const totalPeopleRef = root.child('Total People'); 
     const AMTrainRef = root.child('AM Train'); 
     const PMTrainRef = root.child('PM Train'); 
     const MEXRef = root.child('MEX'); 
     const EmployeesRef = root.child('Employees'); 
     const seatsLeftRef = root.child('Seats Left'); 

     //sync with DB in real time 
     driverRef.on('value', snap => { 
     this.setState({ 
      driver: snap.val() 
      }) 
     }); 
     coachRef.on('value', snap => { 
     this.setState({ 
     coach: snap.val() 
     }) 
     }); 
     timeRef.on('value', snap => { 
     this.setState({ 
     time: snap.val() 
      }) 
     }); 

     totalPeopleRef.on('value', snap => { 
     this.setState({ 
     totalPeople: snap.val() 
     }) 
     }); 

     AMTrainRef.on('value', snap => { 
     this.setState({ 
     amTrain: snap.val() 
      }) 
     }); 

     PMTrainRef.on('value', snap => { 
     this.setState({ 
     pmTrain: snap.val() 
     }) 
     }); 
     MEXRef.on('value', snap => { 
     this.setState({ 
     THEMEX: snap.val() 
     }) 
     }); 
     EmployeesRef.on('value', snap => { 
     this.setState({ 
     Employees: snap.val() 
     }) 
     }); 
     seatsLeftRef.on('value', snap => { 
      this.setState({ 
      seatsLeft: snap.val() 
      }) 
     }); 

    } 


    } 

Answer 1

聽起來像是你應該看看一些前端框架。在你的特定用例中，任何具有單向綁定的東西都可以工作（例如反應）。當然，任何具有雙向綁定的東西都可以工作（角度）。

Egghead.io真的做得很好，一口大小的教程，可以讓你很快運行：https://egghead.io/browse/frameworks

編輯：

好吧，它已經超過一年，因爲我已經過去一直與工作做出反應，但我有一些想法可以幫助。

首先，反應是關於分離組件並將事情分解成更小的位。這個想法是，你在頂層有一些狀態變化，這些變化會通過使用道具傳播到嵌套組件中。

我建議你有一個頂級組件，用於監聽Firebase中的更改（我也很久沒有用過FB），然後將它們發送到基於數據呈現的組件。我推薦閱讀Dan Abramov（Redux的創建者）編寫的這篇文章，該文章討論了智能與啞元組件：https://medium.com/@dan_abramov/smart-and-dumb-components-7ca2f9a7c7d0

同樣，我還沒有用過反應，所以我會用僞代碼來描述你可能會如何想要設計這個。

頂級組件 此組件應該是您的應用與Firebase進行交互的唯一位置。您將在此處配置所有偵聽器，以便在收到新數據時將其簡單傳播到子組件。

constructor() { 

    this.firebaseRef = firebase 
     .database() 
     .ref('logs'); 

    this.state = { 
     logs: [] 
    }; 

    // when the table first loads, use the 
    // firebase ref to get all the current data 
    // and initialize/render the table. After this, 
    // you should only be listening for when a new row 
    // (or "log") is added. Pseudocode: 
    firebase.database().ref('logs') 
     .all() 
     .then(logs => { 
      // project all the logs into the model we need and set to 
      // component's row state 
      this.state.logs = logs.map(logMapper); 
     }); 
} 

// takes in a log that you get from firebase and maps 
// it to an object, modeled such that it contains all 
// the information necessary for a single table row 
logMapper(log) { 
    return { 
     driver: log.child('Driver'), 
     time: log.child('Time'), 
     ... 
    }; 
} 

componentDidMount() { 
    const logsRef = firebase 
     .database() 
     .ref('logs'); 

    firebaseRef.on('child_added', log => { 
     this.state.logs.push(logMapper(log)); 
    }); 
} 


render() { 
    return (
     <table id="numbers"> 
      <thead> 
       <th>Driver</th> 
       <th>Coach</th> 
       <th>Time</th> 
       <th>Total People</th> 
       <th>AM Train</th> 
       <th>PM Train</th> 
       <th>MEX</th> 
       <th>Employees</th> 
       <th>Seats Left</th>    
      </thead> 
      <tbody> 
       {this.state.logs.map(row => <TableRow rowData="logs" />} 
      </tbody> 
     </table> 
    ); 
} 

行組件 您有通過道具接收日誌對象和渲染單行的單獨部件。

render() { 
    return (
     <tr> 
      <td>{this.props.rowData.driver}</td> 
      <td>{this.props.rowData.coach}</td> 
      <td>{this.props.rowData.time}</td> 
      <td>{this.props.rowData.totalPeople}</td> 
      <td>{this.props.rowData.amTrain}</td> 
      <td>{this.props.rowData.pmTrain}</td> 
      <td>{this.props.rowData.THEMEX}</td> 
      <td>{this.props.rowData.Employees}</td> 
      <td>{this.props.rowData.seatsLeft}</td> 
     </tr> 
    ); 
} 

上面的TableRow是啞組件的一個例子。它沒有任何內部狀態，也沒有真正修改任何東西。它只需要通過道具給出什麼，並呈現它應該是什麼。

再一次，你必須考慮我的上面的例子爲僞代碼，如果你試圖複製並運行它，它將不起作用。但希望這可以讓您對如何設計組件的反應有所瞭解。請記住，「一切都是一個組成部分」。

只是一對夫婦最後一個音符：

1. 組件是更有用更通用的他們。理想的 方案是創建一個組件，如果您以後需要類似 的東西，則可以只取已經創建的組件 並稍加修改即插入（或者在最佳情況下爲 方案，根本沒有任何更改！）。因此，如果您發現自己需要在您的應用中使用類似表格 ，那麼您需要進一步概括我的 示例。例如，firebase ref明確地與 「logs」集合連接，使該表組件僅對那一個對象類型有用。 您需要讓父組件接收其可以使用的表名稱 或已經初始化的Firebase引用。 這樣，組件不會被綁定到特定的火力點 表。映射函數也應該被傳入，因爲 我的示例中的映射函數被硬編碼爲映射「日誌」對象，並且您可能想要從firebase中獲取其他類型的 。
2. 我從閱讀中學到了很多東西，但是老實說這個Udemy類我真的確定了我所有的概念：https://www.udemy.com/react-redux/ 我強烈建議服用它，儘管你可能要等到Udemy有一個網站的銷售，你可以得到$ 10-20美元的課程。我已經採取了他的幾個課程，他們都很值錢。

祝你好運！