Передача переменной из одного компонента в другой - PullRequest
Новая
       19

Передача переменной из одного компонента в другой

0 голосов
/ 16 апреля 2020

Я делаю этот сайт обзора путешествий. Я хочу получить правильную коллекцию из Firebase, когда просматриваю один из компонентов континента.

Это работает, если я жестко закодировал континент следующим образом: 

const useCountries = (props) => {
    this.cont = "";
    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();

    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 displayFields={["countryName"]} />
      </Menu>
    );

};

Что я хочу сделать, это отправить информацию в VerContinentBar в список стран, использовать значение в качестве переменной и использовать переменную в коллекции следующим образом: 

  useEffect(() => {
        firebase
            .firestore()
            .collection(VARIABLE)
            .onSnapshot((snapshot) => {
                const newCountries = snapshot.docs.map((doc) => ({
                    id: doc.id,
                    ...doc.data()
                }))
                setCountries(newCountries)

            })


    }, [])
    return countries
}

Нет необходимости говорить Я очень новичок в React. Я понятия не имею, как это сделать. Я застрял здесь весь день.

Я знаю, что это не красота.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 16 апреля 2020

Если я вас правильно понимаю, и displayFields={["countryName"] - это данные, которые вы хотите получить в CountryList, просто отправьте их на созданный вами пользовательский хок 

      const countries = useCountries(displayFields)

Компонент будет рендериться каждый раз, когда придет новый реквизит, и хук будет повторно вызываться

0 голосов
/ 16 апреля 2020

Вы можете объявить Context , который находится над вашими компонентами.

В Context вы можете объявить свойство для continent и обновить его от компонента, ответственного за это.

Все компоненты должны рассматривать этот контекст как источник правды.

...