如何从一个组件向另一个组件发送值

问题描述 投票:1回答:2

我在一个组件中有这个道具,我想将其传递给另一个组件,并在那里用作变量:

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>
    );
};

我已经尝试并试图理解上下文,但是我无法真正地围绕它。我想将props的值放入“ .collection(“ Africa”)“中,但是我不知道该怎么做。我已经阅读了文档,但是我实在太笨了,无法理解如何正确地进行工作。

[如果还有其他解决方案,我会全力以赴。

我想传递的道具是:我为每个大陆创建了一个组件。在每个组件中,我调用VerContinentToolbar,传递大陆的prop /名称,如下所示:

const Africa = ({}) => {

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

 const VerContinentToolbar = (props) => {

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

带有单词“非洲”。

我想将“非洲”传递给我的组件,该组件可以获取非洲大陆的集合(在本例中为非洲)。

我想将道具持有的信息传递给此:

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”。我只想在非洲部分展示这一点。显然,我想在亚洲部分中显示所有带有亚洲标签的国家。

谢谢

javascript reactjs firebase-realtime-database react-props
2个回答
0
投票

据我所知,您想在CountryList中调用useCountries钩子以指定所需的集合。


0
投票
  1. 从大陆组件作为道具(大陆)传递
热门问题
推荐问题
最新问题