[React Typescript 2022] Type a Radio Button Component in React using TypeScript
2021/12/30 23:12:47
本文主要是介绍[React Typescript 2022] Type a Radio Button Component in React using TypeScript,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
Our Radio
component file contains several compound components to create a related group of radio inputs. The RadioGroupContext
is receiving a type of any
currently.
This is a great example to peer into how Strict mode works. To see the difference between the strict mode's true and false setting, we will set strict
to true
. This will change our RadioGroupContext
to be of type null
which will raise some issues later down the line where trying to destructure an object that might be null.
This also gives us the opportunity to better our application with error handling. I will write out a couple of custom hooks to help out with that.
interface RadioGroupContentValue { checked: string | null | undefined; onChange(value: string): void; name: String; }
const RadioGroupContext = React.createContext<RadioGroupContentValue | null>( null ); ... let { checked, onChange, name } = useRadioGroupContent("RadioGroup"); ... function useRadioGroupContent(name: string) { let ctx = React.useContext(RadioGroupContext); if (!ctx) { throw Error(`A ${name} was rendered outside a RadioGroup Component`); } return ctx; }
这篇关于[React Typescript 2022] Type a Radio Button Component in React using TypeScript的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-10-04package.json 文件位置在哪?-icode9专业技术文章分享
- 2024-10-01Craco.js学习:从入门到实践指南
- 2024-10-01Create-React-App学习:入门与实践指南
- 2024-10-01CSS-in-JS学习:从入门到实践指南
- 2024-09-30JSX语法学习:从入门到初步掌握
- 2024-09-30Mock.js学习:入门教程与实战演练
- 2024-09-30React Hooks学习:从入门到实践
- 2024-09-30受控组件学习:React中的基础入门教程
- 2024-09-29JS定时器教程:初学者必看指南
- 2024-09-29JS对象教程:初学者的全面指南