类型“IntrinsicAttributes”上不存在属性“contactList”.ts(2322)

Question

我只想将对象数组 contactList 作为 prop 传递给 ContactList 组件，但我遇到了错误

  Property 'contactList' does not exist on type 'IntrinsicAttributes'.ts(2322)

我是 typescript 的新手，我已经被困了几个小时，请帮忙谢谢！

import { useState } from "react";
import ContantList from "./ContantList";


function ContactForm()  {
    
  interface Contact {
    name: string;
    email: string;
  }

  const [contactList, setContactList] = useState<Contact[]>([]);

  function onAddContact(event: React.FormEvent<HTMLFormElement>): void {
    event.preventDefault();
    const formData = new FormData(event.currentTarget);
    const name = formData.get("name") as string;
    const email = formData.get("email") as string;
    setContactList((prevData) => [...prevData, {name: name, email: email}])
    
    }

  return (
    <form onSubmit={onAddContact}>
      <h1 className="ml-5 mt-10">Contact Registration Form</h1>
      <label className="mb-1 ml-5 mt-5 inline-block" htmlFor="name">
        Name
      </label>
      <input className="ml-5 block" type="text" name="name" id="name" />
      <label className="mb-1 ml-5 mt-5 inline-block" htmlFor="email">
        Email
      </label>
      <input className="ml-5 block" type="email" name="email" id="email" />
      <button type="submit"
        className="mb-1 ml-5 mt-5 border bg-[#ddd] p-2 text-white"
      >
        Add
      </button>
      <section className="mt-5 bg-[#FFFFFF] p-5" id="Contacts">
        CONTACTS
        <ul className="mt-5 list-none p-5">
          <ContantList contactList={contactList}/> //  Property 'contactList' does not exist on type 'IntrinsicAttributes'.ts(2322)
        </ul>
      </section>
    </form>
  );
}

export default ContactForm;

Answer 1

可能问题出在你的 ContactList 属性上，它必须有一个参数

interface Contact {
  name: string;
  age: number;
  ...
}

function ContactList(props: { contactList: Contact[]}) {}

Answer 2

经过几分钟的搜索，我终于从这里找到了解决方案

import { FC } from "react";
import { Contact } from "./ContactForm";

// create a new interface for prop types
interface Props{
    props: Contact[];
 }

 const ContactList: FC<Props> = ({props}) => {
    return (
        <>
              {props.map((prop) => (
                <li>
                <div className="inline-block">
                    <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor" className="w-40 h-40">
                        <path fillRule="evenodd" d="M18.685 19.097A9.723 9.723 0 0021.75 12c0-5.385-4.365-9.75-9.75-9.75S2.25 6.615 2.25 12a9.723 9.723 0 003.065 7.097A9.716 9.716 0 0012 21.75a9.716 9.716 0 006.685-2.653zm-12.54-1.285A7.486 7.486 0 0112 15a7.486 7.486 0 015.855 2.812A8.224 8.224 0 0112 20.25a8.224 8.224 0 01-5.855-2.438zM15.75 9a3.75 3.75 0 11-7.5 0 3.75 3.75 0 017.5 0z" clipRule="evenodd" />
                    </svg>
                </div>
                <div className="ml-5 inline-block align-top">
                    <div className="flex flex-col justify-center h-40">
                        <h3 className="inline-block">{prop.name}</h3>
                        <a href="#0" className="inline-block">{prop.email}</a>
                    </div>
                </div>
            </li>
      ))}

        </>
    );
}

export default ContactList;