為什么我的號碼在傳入prop時會作為一個物件出現？-有解無憂

我有一個組件FooterScroll。主頁是TvIndex.

這是FooterScroll組件

const FooterScroll = (Id: number) => {
  const { event } = useEvent(Id);
  console.log('Id', Id);

  return (
    <Marquee speed={85}>
      <Grid container>
        {event?.notices.map((notice: EventNotice) => {
          if (notice.approved) {
            return (
              <>
                <Grid item px={4} key={notice.id}>
                  <CampaignIcon />
                </Grid>
                <Grid item alignItems="center">
                  {notice.body}
                </Grid>
              </>
            );
          }
        })}
      </Grid>
    </Marquee>
  );
};

export default FooterScroll;

這是電視索引頁面

  import FooterScroll from 'components/pages/members/tv/scrolling-footer';

  const TvIndex: React.FC = () => {
  const classes = useStyles();

  return (
    <div className={classes.root}>
      <div className={classes.scrollFooter}>
        <FooterScroll Id={39324} />
      </div>
    </div>
  );
};

export default TvIndex;

對于我不明白，我在此傳遞任何身份證號碼作為道具在我的主要成分出于某些原因FooterScroll，它給了我這個錯誤：Type '{Id: number;}' is not assignable to type 'number'。然后，我決定控制臺日志這里面FooterScroll，它看起來像ID獲取傳遞后TvIndex，它通過內部FooterScroll組件作為物件，像這樣：Id > Object { Id: 39324 }。

我該如何解決這個問題？

uj5u.com熱心網友回復：

傳遞給 React 組件的引數是一個object，其屬性是呼叫者傳遞的 props。例如

<FooterScroll Id={39324} />

導致 prop 物件：

{
  Id: 39324
}

React 這樣做可以輕松地向props物件添加額外的道具或屬性，而無需過多更改函式簽名：

<FooterScroll Id={39324} someOtherProp="foo" />

導致 prop 物件：

{
  Id: 39324,
  someOtherProp: 'foo'
}

因此，您需要將函式定義更改為

const FooterScroll = ({ Id }: { Id: number }) => {

或做

const FooterScroll = (props: { Id: number }) => {
  const { Id } = props;

uj5u.com熱心網友回復：

你的論點FooterScroll是錯誤的。試試這個：

  const FooterScroll = ({ Id }: { Id: number }) => {
  ...
  }

它應該作業。

轉載請註明出處，本文鏈接：https://www.uj5u.com/shujuku/394849.html

標籤：javascript 反应打字稿下一个.js

上一篇：如何創建一個將傳遞的引數視為文字的函式？

下一篇：反應按鈕不重新渲染組件