reactjs - React 和 TypeScript，在将 props 传递给子组件时，绑定元素 'todos' 隐式具有 'any' 类型？

TypeScript 对属性 { todos } 抱怨，它说“绑定元素 'todos' 隐式具有 'any' 类型。”

有人能帮我吗？我尝试了很多方法还是解决不了.. 我是否也需要将接口传递给子类？

//TodoList.tsx
import React from "react";

export default function TodoList({ todos }) {
  return <div>{todos.id}</div>;
}

//App.tsx
import { useState, useRef } from "react";
import { uuid } from "uuidv4";
import TodoList from "./TodoList";

export default function App() {
  interface Todo {
    id: string;
    title: string | undefined;
    completed: boolean;
  }

  const [todos, setTodos] = useState<Todo[]>([]);
  const refTitle = useRef<HTMLInputElement | null>(null);

  const handleAdd = () => {
    const title = refTitle.current?.value;
    setTodos((todos) => {
      return [...todos, { id: uuid(), title: title, completed: false }];
    });
  };

  return (
    <>
      <TodoList todos={todos} />
      <input ref={refTitle} type="text" />
      <button onClick={handleAdd}>Add</button>
    </>
  );
}

答案＃1

你应该将 todos 作为 Todo 类型数组的 props 传入。

App.tsx

import { useState, useRef } from "react";
import uuid from "react-uuid";
import TodoList from "./TodoList";
import { Todo } from "./types";

export default function App() {
  const [todos, setTodos] = useState<Todo[]>([]);
  const refTitle = useRef<HTMLInputElement | null>(null);

  const handleAdd = () => {
    const title = refTitle.current?.value;
    setTodos((prev) => [
      ...prev,
      { id: uuid(), title: title, completed: false }
    ]);
  };

  return (
    <>
      <TodoList todos={todos} />
      <input ref={refTitle} type="text" />
      <button onClick={handleAdd}>Add</button>
    </>
  );
}

TodoList.tsx

import { Todo } from "./types";

export default function TodoList({ todos }: { todos: Todo[] }) {
  return (
    <>
      {todos.map((todo, i) => (
        <div key={i}>{todo.title}</div>
      ))}
    </>
  );
}

types.ts

export interface Todo {
  id: string;
  title: string | undefined;
  completed: boolean;
}

这是因为 React 组件只接受 对象 作为参数

这是可行的解决方案 https://codesandbox.io/s/props-to-child-tsx-vuzo2s

答案＃2

你还没有定义传递给 Todolist 的 prop 类型。只需将你在 app.tsx 中的接口添加到 todolist.tsx 中，然后在那传递类型 Todo 给 props。我已经在下面的代码片段中进行了相同的修改。

import React from "react";
import {Todo} from "./App"

export default function TodoList({ todos : Todo }) {
  return <div>{todos.id}</div>;
}

import { useState, useRef } from "react";
import { uuid } from "uuidv4";
import TodoList from "./TodoList";

export interface Todo {
    id: string;
    title: string | undefined;
    completed: boolean;
  }


export default function App() {
  
  const [todos, setTodos] = useState<Todo[]>([]);
  const refTitle = useRef<HTMLInputElement | null>(null);

  const handleAdd = () => {
    const title = refTitle.current?.value;
    setTodos((todos) => {
      return [...todos, { id: uuid(), title: title, completed: false }];
    });
  };

  return (
    <>
      <TodoList todos={todos} />
      <input ref={refTitle} type="text" />
      <button onClick={handleAdd}>Add</button>
    </>
  );
}