ตอบโต้/NextJS ลองอุปกรณ์ประกอบที่จะเป็นหลานเชื่อมโยงส่วนประกอบไม่ได้ทำงาน

Question 1

ฉันติดอยู่และไม่สามารถคิดออกถ้านี่เป็นปัญหากับ NextJS.

ฉันมีสามส่วนประกอบ:

CardsList(รายการทั้งไพ่-มีหลาย <Card> เด็ก)
การ์ด(ตัวแทนของการ์ด-มี <Button> เด็ก)
ปุ่ม(แสดงปุ่มอยู่ในการ์ด-ใช้ <Link> ส่วนประกอบ)

ปุ่มส่วนประกอบบรรจุ nextjs/เชื่อมโยงส่วนประกอบ.

ฉันต้องการต้องส่งต่อเชื่อมโยงไปยังข่าวจาก CardsList ผ่านการ์ดขึ้นไปบนปุ่ม(และที่มาของฉัน <Link>'s href)...

นี่ทำงานได้เยี่ยมมาถ้าฉันผ่านการเชื่อมโยง(e.g./mytest)โดยตรงจากการ์ดที่ปุ่ม...มันก็ยังแสดงข้อความเมื่อฉันเส้นทางมันออกมาจาก CardsList ผ่านการ์ดไปปุ่มนี้เพื่อพิมพ์มันอยู่บนหน้าจอ-ใช่ผมเห็นคุณค่าของมันแต่มันไม่ทำงานเมื่อฉันทำแบบนี้:

export default function Button({ text, link }) {
  return (
    <Link href={link} passHref>
      <button className="bg-transparent hover:bg-primary text-link font-semibold hover:text-white py-1 px-3 border border-link hover:border-transparent rounded self-center" >
        {text}
      </button>
    </Link>
  );
}

ใช่แล้ว {text} ทำงาน-ยังผ่านมาจาก grandparent ส่วนประกอบ(CardsList). แต่การเชื่อมต่อส่วนประกอบยังไม่ยอมรับที่ผ่านอุปกรณ์ประกอบที่ถ้ามันไม่ตรงส่งมาจากของมันโดยตรงพ่อแม่ส่วนประกอบ! (ใช่มันได้ผลถ้าฉันส่งข้อความเดียวที่ระดับ-แต่ถ้ามันผ่านจาก CardsList(และก็ผ่านมันจะไม่ถูกยอมรับ!)

Unhandled Runtime เกิดข้อผิดพลาดเกิดข้อผิดพลาด:ล้มเหลวอุปกรณ์ประกอบประเภทที่อุปกรณ์ประกอบ href คาดหวังให้เป็น string หรือ object ใน <Link>แต่มี undefined แทน

และใช่ฉันรู้ฉันอาจจะใช้สถานะการจัดการแต่ฉันไม่อยากตั้งสถานะการจัดการเรื่องนี้-อย่างที่มันไม่ต้องการมันไปอยู่ที่อื่นได้อย่างไร

ขอบคุณมากก่อนหรอกว่าลง,ลง,ลง,ลง

Sascha

Question 2

ผมอ"ซ่อมมัน"(ไม่ภูมิใจ!) โดยเพิ่งสร้างอีกข้อความก่อนที่ผ่านไปที่ร็อต้องการเชื่อมต่อส่วนประกอบ.

export default function Button({ text, link }) {
  return (
    <Link href={`${link}`} passHref>
      <button className="bg-transparent hover:bg-primary text-link font-semibold hover:text-white py-1 px-3 border border-link hover:border-transparent rounded self-center" >
        {text}
      </button>
    </Link>
  );
}

นี่มันแปลกๆ...และบางทีฉันอาจจะเจอเหตุผลที่ทำไมในอนาคต

Greetz,

Sascha

Sascha · Answer 1 · 2021-11-15T07:50:43

ผมอ"ซ่อมมัน"(ไม่ภูมิใจ!) โดยเพิ่งสร้างอีกข้อความก่อนที่ผ่านไปที่ร็อต้องการเชื่อมต่อส่วนประกอบ.

export default function Button({ text, link }) {
  return (
    <Link href={`${link}`} passHref>
      <button className="bg-transparent hover:bg-primary text-link font-semibold hover:text-white py-1 px-3 border border-link hover:border-transparent rounded self-center" >
        {text}
      </button>
    </Link>
  );
}

นี่มันแปลกๆ...และบางทีฉันอาจจะเจอเหตุผลที่ทำไมในอนาคต

Greetz,

Sascha

ตอบโต้/NextJS ลองอุปกรณ์ประกอบที่จะเป็นหลานเชื่อมโยงส่วนประกอบไม่ได้ทำงาน

คำถาม

คำตอบที่ดีที่สุด

ในภาษาอื่นๆ

หน้านี้อยู่ในภาษาอื่นๆ

ดังอยู่ในนี้หมวดหมู่

ดังคำถามอยู่ในนี้หมวดหมู่