如何使用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美元的课程。我已经采取了他的几个课程，他们都很值钱。

祝你好运！