React JS - 将道具从导航链接传递到组件

Question

我在一个名为“ProductCard”的组件中生成了一个带有“navlink”的链接，我想将这些道具传递给一个名为“Product”的组件

ProductCard 组件

import React, {Component} from "react";
import {NavLink} from "react-router-dom";

class ProductCard extends Component{

render() {

    return (
        <div className="col-xl-4 col-md-6 col-xs-12">
            Name : {this.props.product.name}<br/>
            Price : {this.props.product.price}<br/>

            <NavLink
                to={{
                    pathname:"/product/" +  `${this.props.producto.id}`,
                    aboutProps:{
                        product_id: `${this.props.product.id}`,
                        product_name: `${this.props.product.name}`,
                        product_sku: `${this.props.product.sku}`,
                    }
                }}
                exact
            > Show product
            </NavLink>

        </div>
    );
}
}

export default ProductCard;

Product.js 组件

import React, {Component} from "react";

class Product extends Component{

constructor(props) {
    super(props);
    console.log(props.location.aboutProps);
    this.state = {
        products: []
    }
}


render() {

    return (

            <div className="app container" style={{backgroundColor: "red", padding: "10px"}}>

                Product<br/>

            </div>

    );
}
}

export default Product;

正如我所说，我遇到的问题是能够将父 ProductCard 组件的属性传递给子产品组件

Answer 1

TLDR：改变你的方法。指针示例

此处为示例 https://codesandbox.io/s/brave-visvesvaraya-81c0p?file=/src/App.js

除了@Stoobish 的回答，我想对您的代码提供一些提示：

使用上面的解决方案，您的链接最终会像 /products/1/test/1223345。如果您有大量数据，这不是一个好习惯

const linkData = await fetch(`/productdata`);
// linkData will equal array of 10 products
// { id: 1, sku: 1, name: "Product 1"}

linkData.forEach(data => {
 return (
     <NavLink
       to={{
        pathname:"/product/" +  `${data.id}`,
        aboutProps:{
           product_id: `${data.id}`,
           product_name: `${data.name}`,
           product_sku: `${data.sku}`,
         }
       }}
       exact
     > 
      Show product
    </NavLink>
);
}

但是

使用 React，您应该加载每个组件所需的尽可能多的数据。

建议

1. 改变你的链接方式

// This accepts anything like /product/123
<Route
   exact
   path="/product/:id"
   render={({ match }) => {
    // Render can be used to instead of state - to inject props directly into a component 
    return <ProductCard id={Number(match.params.id)} />;
   }}
 />

1. 在 Product/ProductCard 组件中获取您的数据

import React, { Component } from "react";

class ProductCard extends Component {
  constructor(props) {
    super(props);

    // Replaces a fetch()/API request
    this.state = {
      products: [
        {
          id: 123,
          name: "Test",
          price: 1234
        }
      ]
    };
  }
  render() {
    const { name, price } = this.currentProduct;
    return (
      <div className="col-xl-4 col-md-6 col-xs-12">
        Name : {name}
        <br />
        Price : {price}
        <br />
      </div>
    );
  }

  get currentProduct() {
    const { id } = this.props;

    if (!id) {
      return {
        name: "No Item",
        price: 0
      };
    }

    const { products } = this.state;
    const currentProduct = products.find((product) => product.id === id);
    return {
      name: (currentProduct && currentProduct.name) || "No Item",
      price: (currentProduct && currentProduct.price) || 0
    };
  }
}

export default ProductCard;

Answer 2

编辑：改为使用状态

state: {
      product_id: this.props.product.id,
      product_name: this.props.product.name,
      product_sku: this.props.product.sku
}

像这样访问道具：props.location.state.product_id