如何将变量传递给多层组件？例如。传递到productCard页面，然后传递到products页面以显示所有卡片

function App() {
  const products = [
    { id: 1, name: 'Product 1' },
    { id: 2, name: 'Product 2' },
    { id: 3, name: 'Product 3' }
  ];

  return (
    <div>
      <ProductCard products={products} />
    </div>
  );
}

function ProductCard(props) {
  return (
    <div>
      <h1>Product Card</h1>
      <Products products={props.products} />
    </div>
  );
}

function Products(props) {
  return (
    <div>
      <h2>All Products</h2>
      <ul>
        {props.products.map(product => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}