如何根據用戶當前所在的頁面呈現相同的組件？

Question

我有一個名為 Card 的組件。 我在第 1 頁和第 2 頁上渲染了兩次，它根據頁面的不同顯示了一些不同的內容。 這是我最初的方法。

const Card = () => {
const [cardState, setCardState] = useState("firstpage");
  const firstPageProducts = productArray.slice(0, 4);
  const secondPageProducts = productArray.slice(5, productArray.length);
  const [shownImages, setshownImages] = useState([]);

  useEffect(() => {
    const shownImages = firstPageProducts.slice(0, 2);
    setshownImages(shownImages);
  }, []);

if (cardState === "firstpage") {
    return (
      <div>
        some first page stuff
      </div>
    );
  } else if (cardState === "secondpage") {
    return (
      <div>
        some second page stuff
      </div>
    );
  }
};

我希望它有一種方法可以使它成為無狀態的，我可以從我正在渲染卡片 state 的頁面中定義它。我還希望它堅持下去，如果我 go 回到第 1 頁，它會正確加載第 1 頁的東西。

現在，如果我將卡片 state 作為 prop 傳遞給應用程序，它有時會拋出一個錯誤，聲稱該組件根本沒有被渲染，或者如果它渲染了，它會同時更改第一頁組件和第二頁組件。 我對反應還很陌生，我聽說過無狀態組件。 我在想這有可能成為其中之一。

我怎樣才能做到這一點？

Answer 1

我想你想要的是道具。 Prop 是從父組件（例如Deck組件或其他組件）傳遞給案例Card中的child component組件的東西。 如果您的應用程序中存在，請確認。

例如

const Deck = () => {
    return (
        <div>
            <Card cardContent='I am first' productList={[1, 2, 3]} />
            <Card cardContent='I am second' productList={[4, 5, 6]} />
        </div>
    );
};

const Card = ({ cardContent, productList }) => {
    return <div>
       <h1>{cardContent}</h1>
        {productList.map((product) => {
            return <p>{product}</p>
        })}
    </div>;
};