如何在React JS中获得卡的href和id的动态值？

import React, { useState } from 'react';

function Card() {
  const [cardData, setCardData] = useState({ href: '', id: '' });

  // 其他组件代码

  return (
    <div>
      {/* 卡片内容 */}
    </div>
  );
}

export default Card;

import React from 'react';
import Card from './Card';

function App() {
  const cardHref = 'https://example.com';
  const cardId = 'card-1';

  return (
    <div>
      <Card href={cardHref} id={cardId} />
    </div>
  );
}

export default App;

import React from 'react';

function Card(props) {
  const { href, id } = props;

  // 更新状态变量
  useEffect(() => {
    setCardData({ href, id });
  }, [href, id]);

  // 其他组件代码

  return (
    <div>
      {/* 卡片内容 */}
    </div>
  );
}

export default Card;