React Typescript 如何通过类型传递道具

Question

尝试在 React 中使用 Typescript 变得更好

我有一个超级简单的应用程序，其中我有App.tsx和一个用于对象数组的 useState

import List from './components/List';

interface IState{
  name: string
  age: number
}

function App() {

  const [people, setpeople] = useState<IState[]>([
    {
      name: 'Chris',
      age: 20
    },
    {
      name: 'John',
      age: 28
    },
    {
      name: 'Paul',
      age: 23
    }
  ])

  return (
    <div className="App">
      <List people={people}/>
    </div>
  );
}

export default App;

我想将其作为道具传递给另一个组件List.tsx 。

interface IProps{
    name: string
    age: number
  }

const List = (people:IProps[]) => {
    return (
        <div>
            {people.map(person => (
                <h2>{person.name}</h2>
            ))}
        </div>
    );
};

export default List;

我在 App.tsx 中有App.tsx的类型，我正在尝试在List.tsx中使用相同的类型

App.tsx中的问题<List people={people}/>我得到的人

Type '{ people: IState[]; }' is not assignable to type 'IntrinsicAttributes & IProps[]'.
  Property 'people' does not exist on type 'IntrinsicAttributes & IProps[]'

如何使用类型传递 prop 中的数据？

Answer 1

那是因为props是顶层 object ，它包含传递给组件的所有 props，所以你应该解构它，或者更改接口：

快速修复：解构道具

const List = ({ people }: { people: IProps[] }) => { ... }

更好的解决方法：更改IProps的类型，以便它定义嵌套的people键

interface IProps{
    people: Array<{
        name: string;
        age: number;
    }>
}

const List = ({ people }: IProps) => { ... }

---

建议

一些额外的提示：不要在两个文件中声明相同的道具接口，这意味着如果你以后改变主意，你需要在多个位置更新它们，你总是可以让List导出people道具（或者实际上，原子化版本，比如说IPerson ），然后让消费父级导入它。 一个例子：

// List.tsx
export interface IPerson {
    name: string;
    age: number;
}
interface IProps {
    people: IPerson[];
}
const List = ({ people }: IProps) => { ... }

然后...

// App.tsx
import List, { IPerson } from './components/List';
const [people, setpeople] = useState<IPerson[]>([ ... ]);

Answer 2

默认情况下，反应功能组件仅接受具有children属性的对象作为props 。 但是您可以通过以下方式扩展它：

interface IProps{
    name: string
    age: number
  }

const List:React.FC<Iprops[]> = ({people}) => {
    return (
        <div>
            {people.map(person => (
                <h2>{person.name}</h2>
            ))}
        </div>
    );
};

export default List;

Answer 3

您可以在第一个文件中导出您的界面，然后在第二个文件中导入它

export interface IState{
  name: string
  age: number
}

并且在 List.tsx 中使用相同的接口，

import { IState} from './List';