Question

反应打字稿。我要呈现此列表，但不呈现。

我是Typescript的新手，我不太了解如何将道具从App.tsx传递给子级Technology.tsx

Vue JS
Node JS
Angular JS
反应JS

Technology.tsx

preBootstrapCommands:
  - "sysctl -w  vm.max_map_count=262144"
  - "systemctl restart docker"

App.tsx

import React from 'react';

export type State = {
    id: number;
    name:string;
  } 
   
const Technology: React.FC <State[]>  = ({id,name}) => {
    return ( 
        <div >
            <h2 key={id}>{name}</h2>
        </div>
     );
}

export default Technology;

Answer 1

<Technology>接受的道具与您传递的道具不匹配。

export type State = {
  id: number;
  name:string;
} 
const Technology: React.FC <State[]>  = ({id,name}) => { ... }

这需要道具，例如：

<Technology id={item.id} name={item.name} />

您必须明确传递id和name作为道具。

或者您可以将Technology的道具更改为此：

export type State = {
  technology: {
    id: number;
    name:string;
  } 
}
const Technology: React.FC <State[]>  = ({technology}) => {
  return ( 
    <div >
      <h2 key={technology.id}>{technology.name}</h2>
    </div>
  );
}

现在您可以像上面一样传递单个technology道具：

<Technology technology={item} />

打字稿反应清单

1 个答案: