将const变量值传递给另一个js文件

Question

我是 React 前端开发的新手。我有一个产品列表，我正在尝试显示产品详细信息我无法在我的 slug.js 文件中获取所选产品的 ID，该文件包含我的产品详细信息的 JSX

这是我的 ProductCard，我可以从此页面检索产品 ID，但我无法将其发送到另一个页面，即包含我的产品详细信息的 slug.js 的 JFX 任何帮助，我们将不胜感激

我想将 myChosenProduct const 值传递给 slug.js 文件的参数

export default function ProductCard({ data, label }) {
  const productData = {
    id: data.id,
    product_name: data.product_name,
    description: data.description,
    color: data.color,
    generalDescription: data.generalDescription,
    packageContent: data.packageContent,
    warranty: data.warranty,
    comments: data.comments,
    height: data.height,
    width: data.width,
    depth: data.depth,
    weight: data.weight,
    image: data.image,
    price: data.price,
    rating: data.rating,
    quantity: 1,
    sku: "032319DMJ",
    category: data.category,
  };

  return (
    
    <div className={styles.item}>
      <Link href={`products/product/${productData.id}`}>
        <a className={styles.productLink}>
          <FetchImage
            src={productData.image}
            alt={productData.product_name}
            width={240}
            height={160}
            objectFit="contain"
          />
          <h2 className={styles.productTitle}>
            {label ? <span className={styles.label}>{label}</span> : ""}
            {productData.product_name}
          </h2>
        </a>
      </Link>
      <div className={styles.itemContent}>
        <div className={styles.itemPrice}>
          <p>{convertFloatToCurrency(productData.price)}</p>
          <Link href={`/produto/${productData.id}`}
           to={{
           pathname: "/produto/${productData.id}",
           state: productData.id // your data array of objects
          }}

          >
         
            <a>
            
              <RedButton onClick={() => {{saveProductID(productData.id)}
                
              { console.log(productData.id);

                const myCHosenProduct= getProductById(productData.id);
                console.log(myCHosenProduct);}

  }} style={{ width: "100%" }}>Ver mais</RedButton>
              
            
            </a>
          </Link>

        </div>
        <div className={styles.rating}>
          <RatingStars value={productData.rating} />
        </div>
      </div>
    </div>
    
  );
  
  
}

这是我的 slug.js 文件：

export default function Produto({ productData, data }) {
//HERE I want to get myChosenProduct value in Pruduto parameter or in this file it doesn't matter So I can display my product's details

  return (
    <div className={styles.productContainer}>
      
      
      <div className="container">
        <Breadcrumbs />

        <div className={styles.content}>
          <section className={styles.productInfo}>  
         { /* 3) PROBLEM MAYBE RELATED TO THE 1ST ONE  <ProductGallery images={images}/> */ }
              <div>
              <div className={styles.infoWrapper}>
              <div className={styles.rating}>
                <div className={styles.stars}>
               { /* SEEMS LIKE EVERYTHING RELATED TO PRODUCTDATA HAS PROBLEMS   <RatingStars value={productData.rating} size={16} /> */}
                  <span>
                   
                  </span>
                </div>
                <div>
                  <p>
                    Vendido e entregue por <span>Mega Atacado</span>
                  </p>
                </div>
                </div>
                </div>

              <div className={styles.productName}>
               { /*<h1>{productData.product_name}</h1> */}
              </div>
            </div>
          </section>

       

        


          <InformacoesProduto style={{ marginTop: "2.5rem" }} />
        </div>
      </div>
    </div>
  );
}

Answer 1

在 ReactJs 中，道具从 parent 组件传递到它的 child 组件。当你在他的 parent.

中调用它时，你必须检查你传递给组件 Produto 的“productData”是什么

将const变量值传递给另一个js文件

Passing const variable value to another js file

frontend

reactjs