如何將價值從一個組件發送到另一個組件

Question

我在我的一個組件中有這個道具，我想將它傳遞給另一個組件並在那里用作變量：

const VerContinentToolbar = (props) => {


   return (
     <Menu className="nav-icon">
       <CountryList displayFields={["countryName"]} />
     </Menu>
   );
 };

如果我 console.log(props.props)，我得到這個： https://imgur.com/a/HnRHDcH這是我想傳遞給 useCountries 的值。 接收組件如下所示：

const useCountries = (props) => {
    const [countries, setCountries] = useState([])


    useEffect(() => {
        firebase
            .firestore()
            .collection("Africa")
            .onSnapshot((snapshot) => {
                const newCountries = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
                }))
                setCountries(newCountries)
            })
    }, [])
    return countries
}



const CountryList = ({ displayFields = [] }) => {
    const countries = useCountries();
    console.log(countries)

    return (
        <div className="countries">
            {countries.map(country => (
                <div key={country.id}>

                    <div className="entry">

                        {displayFields.includes("continent") && (
                            <div>Name of continent: {country.continent}</div>

                        )}
                        {displayFields.includes("revName") && (
                            <div>{country.revName}</div>
                        )}
                        {displayFields.includes("countryName") && (
                            <div><Link to={"./Jumbotron"}>{country.countryName}</Link></div>
                        )}
                        {displayFields.includes("dest1") && (
                            <div>Destination 1: {country.dest1}</div>
                        )}
                        {displayFields.includes("dest2") && (
                            <div>Destination 2: {country.dest2}</div>
                        )}
                        {displayFields.includes("dest3") && (
                            <div>Destination 3: {country.dest3}</div>
                        )}
                        {displayFields.includes("beerPrice") && (
                            <div>Beer price: {country.beerPrice}</div>
                        )}
                        {displayFields.includes("foodPrice") && (
                            <div>Food price: {country.foodPrice}</div>
                        )}
                        {displayFields.includes("hostelPrice") && (
                            <div>Hostel price: {country.hostelPrice}</div>
                        )}
                        {displayFields.includes("review") && <div>Review: {country.review}</div>}
                        {displayFields.includes("imgUrl") && <img src={country.url} alt="no-img" />}
                    </div>
                </div>
            ))}
        </div>
    );
};

我已經嘗試並嘗試理解上下文，但我無法真正理解它。 我想將道具的價值放入“.collection（“Africa”）”，但我不知道如何去做。 我已經閱讀了它的文檔，但是我頭腦太笨了，無法正確地理解它。

如果還有其他解決方案，我會全力以赴。

我想傳遞的道具是：我為每個大陸創建了一個組件。 在每個組件中，我調用 VerContinentToolbar，傳遞大陸的屬性/名稱，如下所示：

const Africa = ({}) => {

  return (
    <div>
      <VerContinentToolbar props={["Africa"]} />
This means, that

 const VerContinentToolbar = (props) => {

   return (
     <Menu className="nav-icon">
       <CountryList displayFields={["countryName"]} />
     </Menu>
   );
 };

持有“非洲”一詞。

我想將“Africa”傳遞給我的組件，該組件獲取該大陸的集合（在本例中為非洲）。

我想將道具持有的信息傳遞給這個：

const useCountries = (props) => {
    const [countries, setCountries] = useState([])


    useEffect(() => {
        firebase
            .firestore()
            .collection("Africa") <---- I WANT PROP FROM VERCONT HERE
            .onSnapshot((snapshot) => {
                const newCountries = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
                }))
                setCountries(newCountries)
            })
    }, [])
    return countries
}

為了更清楚地說明這一點，我附上了兩張圖片。 亞洲：在這里，我想渲染集合“亞洲”，以顯示屬於亞洲大陸內一個國家的每條評論。

https://imgur.com/a/bZhQAwz

到目前為止，我已經創建了“Imagination Land”並將其附加到 Firebase 中的“Africa”。 我只想在非洲部分展示這一點。 顯然，我想在亞洲組件中顯示所有帶有亞洲標簽的國家。

謝謝

編輯：問題解決了。

import React, { Component, useState, useEffect } from 'react'
import { Link } from 'react-router-dom';
import firebase from '../config'
import './Countries.css'
import props from './Navbar/VerContinentToolbar';



const useCountries = continent => {
    const [countries, setCountries] = useState([]);
      console.log('continent', continent) // <--- Get it as your first argument
      console.log(continent.toString())

    useEffect(() => {
        firebase
            .firestore()
            .collection(continent.toString())
            .onSnapshot((snapshot) => {
                const newCountries = snapshot.docs.map((doc) => ({

                    id: doc.id,

                    ...doc.data()

                }))
                setCountries(newCountries)

            })
    }, [])

    return countries
}



const CountryList = ({ continent, displayFields = []  }) => {
    const countries = useCountries(continent); // <--- Pass it in here

    return (
        <div className="countries">
            {countries.map(country => (
                <div key={country.id}>

                    <div className="entry">

                        {displayFields.includes("continent") && (
                            <div>Name of continent: {country.continent}</div>

                        )}
                        {displayFields.includes("revName") && (
                            <div>{country.revName}</div>
                        )}
                        {displayFields.includes("countryName") && (
                            <div><Link to={"./Jumbotron"}>{country.countryName}</Link></div>
                        )}
                        {displayFields.includes("dest1") && (
                            <div>Destination 1: {country.dest1}</div>
                        )}
                        {displayFields.includes("dest2") && (
                            <div>Destination 2: {country.dest2}</div>
                        )}
                        {displayFields.includes("dest3") && (
                            <div>Destination 3: {country.dest3}</div>
                        )}
                        {displayFields.includes("beerPrice") && (
                            <div>Beer price: {country.beerPrice}</div>
                        )}
                        {displayFields.includes("foodPrice") && (
                            <div>Food price: {country.foodPrice}</div>
                        )}
                        {displayFields.includes("hostelPrice") && (
                            <div>Hostel price: {country.hostelPrice}</div>
                        )}
                        {displayFields.includes("review") && <div>Review: {country.review}</div>}
                        {displayFields.includes("imgUrl") && <img src={country.url} alt="no-img" />}



}
                    </div>
                </div>

            ))}
        </div>
    );
};


export default CountryList

const VerContinentToolbar = (props) => {

  return (
    <Menu className="nav-icon">
      <CountryList
        continent={props.continent}
        displayFields={["countryName"]}
      />
    </Menu>
  );
};

感謝你的幫助。

Answer 1

1. 將它作為來自您的大陸組件的道具（大陸）傳遞

   const Africa = () => { return ( <div> <VerContinentToolbar continent="Africa" /> </div> ); };

2. 在<VerContinentToolbar />中，獲取道具並將其傳遞給<CountryList /> 。 您可以使用上下文 API或 Redux ，而不是將道具傳遞給孫子組件。

    const VerContinentToolbar = props => { console.log('continent prop is now here', props.continent) return ( <Menu className="nav-icon"> <CountryList continent={props.continent} displayFields={["countryName"]} /> </Menu> ); };

3. 在<CountryList />中，獲取道具（ continent ）並將其傳遞到您的useCountries掛鈎中。

    const CountryList = props => { const countries = useCountries(props.continent); // <--- Pass it in here console.log(countries) return ( <div className="countries"> {countries.map(country => ( {/*...code */} ))} </div> ); };

4. 最后在你的鈎子里把它作為第一個參數

   const useCountries = continent => { const [countries, setCountries] = useState([]); console.log('continent', continent) // <--- Get it as your first argument //...code return countries }

Answer 2

據我了解您的問題是，您想在CountryList中調用useCountries掛鈎來指定您想要的集合。

const useCountries = (collection) => {
  const [countries, setCountries] = useState([])

  useEffect(() => {
    firebase
      .firestore()
      .collection(collection) // <-- pass collection argument here
      .onSnapshot((snapshot) => {
        const newCountries = snapshot.docs.map((doc) => ({
          id: doc.id,
          ...doc.data()
        }))
        setCountries(newCountries)
      })
  }, [])
  return countries
}

在CountryList中傳遞您要使用的值useCountries

const countries = useCountries('Africa');