zoukankan      html  css  js  c++  java
  • [React Typescript 2022] Type a Radio Button Component in React using TypeScript

    Our Radiocomponent 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;
    }
  • 相关阅读:
    深拷贝(deep clone)与浅拷贝(shallow clone)
    wait和notify
    Java实现简单RPC框架(转)
    Eclipse 搭建Struts2
    手写HashMap实践
    JVM 类加载器ClassLoader源码学习笔记
    Java 内存模型学习笔记
    Struts2 入门笔记
    struts2 拦截器
    Btrace 拦截时机
  • 原文地址:https://www.cnblogs.com/Answer1215/p/15750747.html
Copyright © 2011-2022 走看看