reactjs - 传递 Prop 以使用 context 或 props 或 redux

Question

嗨，我正在开发一个反应应用程序，需要将我从 API 中提取的道具从一个组件传递到另一个组件。我正在考虑使用 useContext 或 Redux，但觉得这对于我需要做的事情可能有点复杂。我知道我可以将道具从一个传递到另一个，只是无法成功

下面的代码：

what I am pulling props FROM:
import Img from "gatsby-image"
import { graphql, Link } from "gatsby"
import PropTypes, { checkPropTypes } from "prop-types"
import React from "react"

const Card = props => {
  const { name, slug, articleTitle, articleMedia } = props
console.log(props);

  return (
    <div className="bg-white h-full shadow-sm rounded-md overflow-hidden group">
      <Link to={`/article/${slug}`}>
         <div className="group-hover:opacity-75 transition duration-150 ease-in-out"> 
        {props.articleMedia && <Img fluid={props.articleMedia.localFile.childImageSharp.fluid} alt={name} />}
        {/* {props.articleMedia && <img src={`https:${props.articleMedia.file.url}`}></img> */}
        </div> 
        <div className="p-4 sm:p-5">
          <h2 className="sm:text-lg text-gray-900 font-semibold">{props.articleTitle}</h2>
          {/* <p className="text-sm sm:text-base text-gray-700">words</p> */}
            {/* {props.localFile ? <Img fluid={props.localFile.childImageSharp.fluid} alt={name} /> : <img src="default image" />} */}

        </div>
        {/* <div className="group-hover:opacity-75 transition duration-150 ease-in-out">
          {props.localFile && <Img fluid={props.localFile.childImageSharp.fluid} alt={name} />}
        </div> */}
      </Link>
    </div>

  )
}

Card.propTypes = {
  name: PropTypes.string.isRequired,
  slug: PropTypes.string.isRequired,
  summary: PropTypes.string.isRequired,
  thumbnail: PropTypes.shape({
    localFile: PropTypes.object,
  }),
}

export default Card

export const query = graphql`


  fragment ContentfulFragment on ContentfulArticle {
    articleTitle
    articleText {
      id
      
      
      
    }

    slug
    articleMedia {
        file{
          url
        }
        localFile {
          childImageSharp {
            fluid(maxWidth: 444, maxHeight: 342, quality: 85) {
              ...GatsbyImageSharpFluid
            }
          
        }
      }
    }
  }
`


What I am passing props TO:
import { graphql } from "gatsby"
import Img from "gatsby-image"
import React from "react"
import SiteMetadata from "../components/SiteMetadata"
import Button from "../components/Button"
import Cards from "../components/Cards"
import Card from "../components/Cards"
import Carousel from "../components/Carousel"


import Layout from "../layouts/Layout"
//  const obj = JSON.parse();
const { Provider, Consumer } = React.createContext()


// export const MyProvider = MyContext.Provider
// export const MyConsumer = MyContext.Consumer
// // const path = require(`path`);
// export default MyContext;


// const Template = props => {
//   const { articleTitle, articleMedia } = props

 export default props => {
  
  // const {
    
      
  //   articleMedia,
  //   slug,
   
  //  } = props.node
  
  console.log(props);
  return (
    
    <Layout>
     
      {/* /* <SiteMetadata
        title={props.node.articleTitle}
        
      
      /> */}
      {/* <div className="bg-gray-0 py-12 lg:py-16">
        <div className="container">
          <div className="flex flex-wrap">
             <div className="w-full lg:w-2/3 pb-8">
              {gallery && gallery.length === 1 && (
                <Img
                  fluid={gallery[0].props.node.articleMedia.localFile.childImageSharp.fluid}
                  alt={name}
                />
              )} */}
              {/* {gallery && gallery.length > 1 && <Carousel images={gallery} />} */}
            {/* </div>  */}
   
              <h1 className="text-3xl leading-tight font-extrabold tracking-tight text-gray-900 sm:text-4xl mb-1">
                {props.pathContext.node.articleTitle}
              </h1>

            <p>
                {props.pathContext.node.articleText}
              </p> 


              {/* <p className="my-4 text-base text-gray-700 whitespace-pre-line">{props.data.articleText}</p> */}

              {/* <Img fluid={props.articleMedia.localFile.childImageSharp.fluid} />  */}


{/*              
               <div className="my-4 text-base text-gray-700 whitespace-pre-line">
                   <p>{props.pathContext.node.articleText.JSON.parse(str)}</p>
                 </div> 

      //  <Img fluid={props.articleMedia.localFile.childImageSharp.fluid} alt={name} /> 

             
              {/* {url && (
                <div className="mt-8">
                  <Button href={url}>More info</Button>
                </div>
              )} *}

              {/*</Layout><p>{props.articleText}</p>
            </div>
          </div>
        </div>
      </div>
      {related && (
        <div className="bg-gray-100 py-12 lg:py-16">
          {/* <div className="container">
            <h2 className="text-3xl sm:text-4xl leading-tight font-extrabold tracking-tight text-gray-900 mb-8">
              You may also like
            </h2>
          </div> */}
          {/*<Cards items={related} hideLastItemOnMobile={true} />
        </div>
      )} */}
     
    </Layout>
  
  )
}

export const query = graphql`
  fragment MyContentfulFragment on ContentfulArticle {
    articleTitle
    


    articleText {
      id
      
      
    }
    articleMedia {
        file{
          url
        }
        localFile {
          childImageSharp {
            fluid(maxWidth: 444, maxHeight: 342, quality: 85) {
              ...GatsbyImageSharpFluid
            }
          
        }
      }
    }
  }
    
  `

标签： reactjsreduxreact-context