如何在我的 React Typescript 計數器中使用類型接口支撐鑽頭？

Question

我正在制作一個簡單的計數器應用程序來跟蹤我玩的數字紙牌游戲。 我正在將父母的道具傳遞給我的孩子，但道具沒有被傳遞。 我認為修復只是在我在界面中創建的屬性的末尾加上一個問號（？），但這似乎不是最優的。 代碼有效，我只是在主文件和組件文件中重復數據，我不想這樣做。

我的 app.tsx：

import React from 'react'
import './App.css'
import Counter from './components/Counter'

function App() {
  return (
    <div className="App">
      <Counter
        deckName="elusive burn"
        winPercentage={123}
        losses={6}
        wins={7}
      />
    </div>
  )
}

export default App

我的 Counter.tsx：

import React, { useState } from 'react'

// add a ? after the type name if you want any one of these to be optional, ex: wins?
interface Props {
  deckName: string
  wins: number
  losses: number
  winPercentage: number
}

const Counter: React.FC<Props> = () => {
  const [counter] = useState<Props>({
    deckName: '',
    wins: 0,
    losses: 0,
    winPercentage: 0,
  })

  return (
    <div>
      <p>Deck Name: {counter.deckName} </p>
      <p>wins: {counter.wins} </p>
      <p>losses: {counter.losses} </p>
      <p>Win Percentage: {counter.winPercentage}% </p>
    </div>
  )
}

export default Counter

謝謝參觀！

Answer 1

你為什么在這里使用useState ？ 您從props收到所有需要的信息，因此請直接從那里獲取。 然后我想你會看到沒有多余的代碼。

// Counter.tsx
import React from 'react'

// add a ? after the type name if you want any one of these to be optional, ex: wins?
interface Props {
  deckName: string
  wins: number
  losses: number
  winPercentage: number
}

const Counter: React.FC<Props> = ({ deckName, wins, losses, winPercentage }: Props) => {
  return (
    <div>
      <p>Deck Name: {deckName} </p>
      <p>wins: {wins} </p>
      <p>losses: {losses} </p>
      <p>Win Percentage: {winPercentage}% </p>
    </div>
  )
}

export default Counter