如何将值从一个组件发送到另一个组件

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

我已经尝试并尝试理解上下文，但我无法真正理解它。我想将 props 的值放入“.collection("Africa")”，但我不知道该怎么做。我已经阅读了它的文档，但我太笨了，无法正确理解它。

如果有其他解决方案，我洗耳恭听。

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

const Africa = ({}) => {

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

 const VerContinentToolbar = (props) => {

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

保留单词"Africa"。

我想将 "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
}

为了进一步说明这一点，我附上了两张图片。亚洲：在这里，我想渲染集合 "Asia"，以显示属于亚洲大陆某个国家/地区的每条评论。

https://imgur.com/a/bZhQAwz

到目前为止，我已经在 Firebase 中创建了 "Imagination land" 并将其附加到 "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

据我了解你的问题是，你想在 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');

Answer 2

将其作为 prop（大陆）从您的大陆组件中传递

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

在<VerContinentToolbar />中获取道具并传给<CountryList />。您可以使用 context API 或 Redux，而不是将 props 传递给孙子组件。

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

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

最后在你的钩子中将它作为第一个参数

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

  // ...code
  return countries
}

如何将值从一个组件发送到另一个组件

How to send value from one component, to another

javascript

reactjs

firebase-realtime-database

react-props