如何在React中渲染数据(实时/firebase)

npx create-react-app my-app
cd my-app

import React from 'react';

function DataRenderer() {
  return (
    <div>
      {/* 数据渲染的代码 */}
    </div>
  );
}

export default DataRenderer;

npm install firebase

import React, { useEffect, useState } from 'react';
import firebase from 'firebase/app';
import 'firebase/database';

function DataRenderer() {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 初始化Firebase
    const firebaseConfig = {
      // Firebase配置信息
    };
    firebase.initializeApp(firebaseConfig);

    // 获取实时数据
    const database = firebase.database();
    const dataRef = database.ref('data');
    dataRef.on('value', (snapshot) => {
      setData(snapshot.val());
    });

    // 清除监听器
    return () => {
      dataRef.off();
    };
  }, []);

  return (
    <div>
      {data && (
        <ul>
          {Object.entries(data).map(([key, value]) => (
            <li key={key}>{value}</li>
          ))}
        </ul>
      )}
    </div>
  );
}

export default DataRenderer;