0

嘿，React 还是新手，但我正在通过构建我自己的个人应用程序/平台来慢慢磨练它。我有一个将道具传递给单页视图的快速问题。这是我的概述页面，它将从我的数据库中提取所有团队，如下所示：

import React, { useState, useEffect } from 'react';
import firebase from '../../firebase/firebase.utils'
import Button from '../../Components/GeneralComponents/Button.component'
import * as GoIcons from 'react-icons/go';

import TeamList from '../../Components/Teams/TeamList.Component'

function TeamsPage() {

  const [teams, setTeams] = useState([]);
  const [loading, setLoading] = useState(false);
  const ref = firebase.firestore().collection("teams");

  function getTeams() {
    setLoading(true);
    ref.onSnapshot((querySnapshot) => {
      const items = [];
      querySnapshot.forEach((doc) => {
        items.push(doc.data());
      });
      setTeams(items);
      setLoading(false);
      console.log(items);
    });
  }

  useEffect(() => {
    getTeams();
  },[])

  if(loading) {
    return <h1>Loading...</h1>
  }

  return (
    <div className="content-container">
      <h2>Team Page</h2>
      <div className="add-section">
        <div className="actions">
          <Button
            className="bd-btn outlined add-team"
          ><GoIcons.GoGear/>
            Add Team
          </Button>
        </div>              
      </div>      
        <TeamList teams={teams} />
    </div>
  )
}
  
export default TeamsPage;

这被传递到我的 TeamList 组件中：

import React from 'react';
import { Link } from 'react-router-dom'
import { TeamCard } from './TeamCard.Component';

const TeamList = props => {
    return(
    <div className='teams-overview'>
        {props.teams.map(team => (
            <Link to={`/teams/${team.id}`}>
                <TeamCard key={team.id} team={team}/>
            </Link>
        ))}
    </div>
    )

}

export default TeamList;

它映射然后将团队列为卡片组件，其中包含一个链接，该链接应该路由到他们的 id 并传递他们的数据。

现在，在我的一个团队的单页视图中，我正在努力访问该道具数据：

从“反应”导入反应

function TeamSinglePage(team) {
    return (
        <div className="content-container">
            <h1>Single Page View</h1>
            <p>Welcome, {team.teamName}</p>
        </div>
    )
}

export default TeamSinglePage;
4

0 回答 0