Reactjs 如何实际使用上下文？

编辑：使用钩子解决

我一直在疯狂地做这件事。我有一个问题，我必须在另一个组件中使用道具。我知道我应该使用上下文

我已经学习了一些教程，但由于某些原因，我无法将其应用到我自己的代码中

export const FetchContinent = (props) => {
    console.log(props.continent)

return (
    <div>
        {props.continent}
    </div>
)
};

export const=（道具）=>{
控制台日志（道具大陆）
返回(
{props.大陆}
)
};

道具，这正是我想要的

我想在另一个组件中使用这个精确值作为道具

const JumbotronPage = (continent) => {

  return (
    <MDBContainer className="test">
      <MDBRow>
        <MDBCol>
          <MDBJumbotron className="text-center">
            <MDBCardTitle className="card-title h4 pb-2">
              <CountryList
                continent={["NA"]} //<-- HERE!!
                displayFields={["countryName"]}
              />
              <CountryList continent={["NA"]} displayFields={["revName"]} />
            </MDBCardTitle>

const JumbotronPage=（大陆）=>{
返回(
React上下文需要数据的提供者和使用者



假设您阅读了一些其他资料。我将尝试讲述我第一次使用上下文时缺少的部分

Context
由两部分组成：单个提供者和使用者。提供者负责保存值，使用者将获得这些值，并在每次更新时收到通知
将这些注释投射到您的需求中，我建议：

制作一个
提供者
，它将包装所有消费者并向他们提供国家/地区
上下文可能包含多个大陆的数据，消费者可以选择自己需要的内容
上下文只保存值，它可以更智能，并提供一个fetchContinentData（continentName）函数，如果缓存的数据中不存在大陆国家，该函数将按需获取大陆国家
您可以制作一个直接提供大陆国家的钩子：
useControlentCountries
，它使用
useControlentProvider
这是看起来像这样的：

有一个库，它实际上使使用多个上下文变得更容易。
请展示您是如何使用FetchContinents的！谢谢！我不确定我是否遵循了您的代码，但我会写一个关于上下文的解释答案，以及您如何在您的案例中使用它。我将尝试解释它。这是一个审查应用程序，因此我列出了每个Continentsd、 我在非洲组件中使用，将值“Africa”传递给FetchContinental组件。然后我想从FetchContinental获取该值并将其传递给jumbotron。我将使用Continental从firebase数据库获取数据。您是否为每个Continental设置了提供程序？？嗯。我很难理解如何继续并获取正确的Continental。我是否应该在每个Continental组件中使用提供程序？例如：不，我提供的示例将获取所有c一次又一次地在内部存储。当我使用它时，我给了所有大陆。你是说偷懒装载大陆的国家吗？一旦我设法解决了这个问题，我会调查的。谢谢你的帮助！：）谢谢你的时间。我设法弄明白了。毕竟没那么难。谁说学习应该是无痛的。：）我忘了补充说我设法解决了这个问题，但是哇，这太好了。非常感谢你！
               <CountryList
                continent={[props.continent]} //<-- HERE!!
                displayFields={["countryName"]}
              />

export const FetchContext = createContext();

export const FetchContinent = (props) => (
    <FetchContext.Provider value={props}>
        {console.log("Fetch continent: " + props.continent)}
      {props.children}
    </FetchContext.Provider>
  );



const JumbotronPage = (props) => {
  console.log("Props.continent: " + props.continent);
  const value = useContext(FetchContext);
  return (
    <FetchContext.Consumer>
      <h1>{value}</h1>
    </FetchContext.Consumer>
  );
};

const Africa = ({}) => {
  return (
    <div>
      <VerContinentToolbar before="Memories" continent={["Africa"]} />
      <FetchContinent continent={["Africa"]} />

const JumbotronPage = (props) => {

  console.log(<VerContinentToolbar props={props.props} />);
  console.log("fdfds");
  return (
    <MDBContainer className="test">
      <MDBRow>
        <MDBCol>
          <MDBJumbotron className="text-center">
            <MDBCardTitle className="card-title h4 pb-2">
              <CountryList continent="Africa" displayFields={["countryName"]} />
              <CountryList continent="Africa" displayFields={["revName"]} />
              <CountryList
                continent={props.continent}
                displayFields={["countryName"]}
              />
              <CountryList
                continent={props.continent}
                displayFields={["revName"]}
              />
            </MDBCardTitle>

            <MDBCardImage
              src="https://mdbootstrap.com/img/Photos/Slides/img%20(70).jpg"
              src="https://d2gg9evh47fn9z.cloudfront.net/800px_COLOURBOX32059289.jpg"
              className="img-fluid"
            />
            <MDBCardBody>
              hej
              <MDBCardTitle className="indigo-text h5 m-4">
                <CountryList continent="Africa" displayFields={["beerPrice"]} />
                <CountryList continent="Africa" displayFields={["foodPrice"]} />
                <CountryList
                  continent="Africa" 
                  continent={props.continent}
                  displayFields={["beerPrice"]}
                />
                <CountryList
                  continent={props.continent}
                  displayFields={["foodPrice"]}
                />
                <CountryList
                  continent={props.continent}
                  displayFields={["hostelPrice"]}
                />
                <CountryList continent="Africa" displayFields={["dest1"]} />
                <CountryList continent="Africa" displayFields={["dest2"]} />
                <CountryList continent="Africa" displayFields={["dest3"]} />
                <CountryList
                  continent={props.continent}
                  displayFields={["dest1"]}
                />
                <CountryList
                  continent={props.continent}
                  displayFields={["dest2"]}
                />
                <CountryList
                  continent={props.continent}
                  displayFields={["dest3"]}
                />
              </MDBCardTitle>
              <MDBCardText>
                <CountryList continent="Africa" displayFields={["review"]} />

<CountryList
                  continent={props.continent}
                  displayFields={["dest3"]}
                />

const Africa = ({}) => {

  return (
    <div>
      <VerContinentToolbar before="Memories" continent={["Africa"]} />
      <Breadcrumb continent="Africa" />

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



const useCountries = continent => {
    const [countries, setCountries] = useState([]);
    console.log("Country list: " + continent)

    useEffect(() => {
        firebase
            .firestore()
            .collection(continent[0])
            .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 MyContext = React.createContext(null);

// bellow code is for illustration only
const MyContextProdiver = ({ children }) => <MyContext.Provider value={{ continentsData: [] }}>{children}</MyContext.Provider>;

const MyContextConsumer = () => {
  const contextValue = React.useContext(MyContext);

  return null; // a react element must be returned here
}


<MyContextProvider>
  <MyAppThatSomewhereHasAConsumer />
  // or may be directly <MyContextConsumer /> but the idea of the context is to be used in multiple parts
</MyContextProvider>


// this assumes that your context will always start with a truthy value
function useMyContext() {
  const myContextValue = React.useContext(MyContext);
  invariant(myContextValue, 'Have you forgot to put a <MyContext.Provider> somewhere up in the tree ?');
  // or simply put if (!myContextValue) throw new Error('there is no MyContext provider') 
  return myContextValue;
}

// later

const contextValue = useMyContext(); // and you will notified if you are in a tree where there is no provider