“On”e React Gotcha สอง Takeaways

คุณอาจรู้ว่าไม่ควรเริ่มชื่อฟังก์ชันด้วย "use" ใน React แต่ในบางกรณีการเริ่มตัวแปรด้วย "on" อาจทำให้เกิดปัญหาได้เช่นกัน

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

const [onSpecialPage, setOnSpecialPage] = useState()

export const StyledSpecial = styled.div<{onSpecialPage:boolean}>`
margin-top: ${p => p.onObjectiveExplorer ? 0 : 30}px;}
`

Warning: Unknown event handler property `onSpecialPage`. It will be ignored.

มีสองประเด็นที่ฉันจะนำเสนอที่นี่:

1. หลีกเลี่ยงการขึ้นต้นชื่อด้วย "on" ในกรณีนี้ ฉันคิดว่า "in" ก็ใช้ได้เช่นกัน
2. อย่าลืมตรวจสอบคอนโซลของเบราว์เซอร์ของคุณบ่อยๆ เพื่อให้คุณทราบเมื่อคุณสร้างคำเตือนหรือข้อผิดพลาดใหม่