reactjs - วิธีส่งอินเตอร์เฟซเป็นพร็อพใน React พร้อม TypeScript?

ฉันอยากจะส่งอ็อบเจ็กต์เข้าไปในคอมโพเนนต์แบบฟังก์ชันของฉัน อ็อบเจ็กต์นี้มีรูปแบบที่สม่ำเสมอ ดังนั้นฉันจึงใช้อินเทอร์เฟซ นี่คือบรรทัดพารามิเตอร์ของคอมโพเนนต์แบบฟังก์ชัน:

interface Option { value: any, label: string; } 

export default function JSelect(options: Option[], primaryColor: string, textColor: string) {

และนี่คือตัวอย่างการใช้งานของส่วนประกอบ:

interface Option { value: any, label: string; }
const letteroptions: Option[] = [
    { value: 0, label: 'Ab' },
    { value: 1, label: 'A' },
    { value: 2, label: 'Bb' },
    { value: 3, label: 'B' },
    { value: 4, label: 'C' },
    { value: 5, label: 'Db' },
    { value: 6, label: 'D' },
    { value: 7, label: 'Eb' },
    { value: 8, label: 'E' },
    { value: 9, label: 'F' },
    { value: 10, label: 'Gb' },
    { value: 11, label: 'G' }
];

<JSelect options={letteroptions} primaryColor='#87c6bb' textColor='#2c3f43' />

ประเภทถูกกำหนดไว้อย่างเดียวกันพอดี ดังนั้นฉันจึงไม่แน่ใจว่าทำไมสิ่งนี้ถึงไม่ทำงาน นี่คือข้อผิดพลาดที่ฉันได้รับ:

(คุณสมบัติ) ตัวเลือก: Option[]

ประเภท ''{ options: Option[]; primaryColor: string; textColor: string; }'' ไม่สามารถกำหนดค่าให้กับประเภท ''IntrinsicAttributes & Option[]'' ได้ คุณสมบัติ ''options'' ไม่มีอยู่ในประเภท ''IntrinsicAttributes & Option[]''.ts(2322)

คำตอบ #1

แทนที่จะใช้หลายอาร์กิวเมนต์ คุณสมบัติของคุณควรเป็นฟิลด์ของอาร์กิวเมนต์ตัวแรกของคอมโพเนนต์ของคุณ คุณควรกำหนดคอมโพเนนต์ของคุณดังที่แสดงด้านล่างแทน

interface JSelectProps {
  options: Option[];
  primaryColor: string;
  textColor: string;
}


export default function JSelect({
  options,
  primaryColor,
  textColor,
}: JselectProps) {}

ถ้าคุณต้องการเรียนรู้เพิ่มเติมเกี่ยวกับการพิมพ์คอมโพเนนต์ของ React ลองดู cheatsheet ของ React TypeScript

คำตอบ #2

export default function JSelect(options: Option[], primaryColor: string, textColor: string) {

ถ้า JSelect เป็นคอมโพเนนต์ คอมโพเนนต์จะรับเพียง หนึ่งอาร์กิวเมนต์ ไม่ใช่หลายอาร์กิวเมนต์ อาร์กิวเมนต์นั้นเป็นอ็อบเจกต์ที่มี props แต่ละตัว ดังนั้นประเภทสำหรับสิ่งนี้ควรเป็น:

interface JSelectProps {
  options: Option[],
  primaryColor: string,
  textColor: string
}

export default function JSelect(props: JSelectProps) {
  // ... do stuff with props.options, props.primaryColor, props.textColor
}

ถ้าคุณต้องการ คุณสามารถใช้การแยกโครงสร้างเพื่อแยกวัตถุ props ออกเป็นตัวแปรแต่ละตัวได้:

export default function JSelect({ options, primaryColor, textColor }: JSelectProps) {
  // ... do stuff with options, primaryColor, textColor
}