正确类型

Question

我有这个组件：

interface listvote {
  items: any[]
}


const ListVote: React.FC<listvote> = props => {
  useEffect(() => {
    console.log(items)
  })
  return (
    <VoteResult
      id={props.id}
      img={props.img}
      name={props.name}
      score={props.score}
    />
  )
}

export default ListVote

它接收此数组作为道具：

<ListVote items={dataListVote} />


const dataListVote = [
    {
      id: 1,
      img:
        'sampleimage.com',
      name: 'samplename',
      score: 50,
    },
    {
      id: 2,
      img:
        'sampleimage.com',
      name: 'samplename',
      score: 80,
    },
  ]

ListVote中还有另一个组件：

interface voteresult {
  items: any[]
}

const VoteResult: React.FC<voteresult> = props => {
  useEffect(() => {
    console.log(props)
  })
  return <h1>hello</h1>
}

export default VoteResult

问题是，当我尝试将同一数组传递给ListVote组件内的另一个组件时，会引发此错误：

    Type 'PropsWithChildren<listvote>' is missing the following properties from type 'any[]': length, pop, push, concat, and 28 more.

Answer 1

根据您的使用情况：

<VoteResult
      id={props.id}
      img={props.img}
      name={props.name}
      score={props.score}
    />

VoteResult 不接受道具作为道具。因此您输入的类型不正确：

interface voteresult {
  items: any[]
}

正确类型

摆脱错误的最简单的类型：

interface voteresult {
  id: any;
  img: any;
  name: any;
  score: any;
}

Answer 2

主页组件：

<uses-permission android:name="android.permission.READ_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.WRITE_EXTERNAL_STORAGE" />
<uses-permission android:name="android.permission.MODIFY_AUDIO_SETTINGS" />

]

val mReverb = PresetReverb(0, player!!.audioSessionId)
mReverb.preset = PresetReverb.PRESET_LARGEHALL
mReverb.enabled = true

player!!.setAuxEffectInfo(AuxEffectInfo(mReverb.id,1f))
player!!.prepare(mediaSource,false,false)
player!!.seekTo(currentWindow, playbackPosition)
player!!.playWhenReady = playWhenReady

ListVote组件：

const dataListVote = [
    {
      id: 1,
      img:
        'sampleimage.com',
      name: 'samplename',
      score: 50,
    },
    {
      id: 2,
      img:
        'sampleimage.com',
      name: 'samplename',
      score: 80,
    },

VoteResult组件：

<ListVote items={dataListVote} />

错误：

interface listvote {
  items: any[]
}

const ListVote: React.FC<listvote> = props => {
  useEffect(() => {
    console.log(typeof props)
  })
  return <VoteResult items={props} />
}

export default ListVote

如何将Pros传递给TypeScript中的另一个组件

2 个答案:

正确类型