Javascript 按多个级别转发引用[Typescript/React]

我试图遵循原子设计原则，但我不确定是否正确。 我创建了三个组件：表单、可扩展输入和输入。输入是HTML输入包装器，可扩展输入是下拉输入，表单就是表单。我想从表单组件访问当前的输入值，所以我正在按多个级别进行ref转发。表单组件中的一切都很好，但问题是我必须在ExpandableInput组件中使用ref.current.value，但我得到以下错误

类型“”上不存在属性“current”（（实例： HTMLInputElement | null）=>void）|可变对象”。类型“”上不存在属性“current”（实例： HTMLInputElement | null）=>void'

---

我不知道如何告诉typescript ExpandableInput中的ref变量的类型为ref，并且不为null。我不知道通过多级转发ref是否是一种好的做法，也许有更好的方法来获取输入值

示例代码： AddForm

const Form = () => {
    // Refs
    const caRef = useRef<HTMLInputElement>(null);

    return (
        <FormTemplate >
            <ExpandableInput
                option={CompetenceAreaOption}
                ref={caRef}

            />
        </FormTemplate>
    );
}

export default AddForm;

const Form=（）=>{
//裁判
常量caRef=useRef（null）；
返回(
);
}
导出默认AddForm；

可扩展输入

const ExpandableInput = React.forwardRef<HTMLInputElement, IProps>((
   props,
   ref
): JSX.Element => {

    const pickInputValue = (value: string): void => {
        console.log(ref.current) // Error
        console.log(ref) // Input reference
        }
    }

    return (
        <div>
            <div>
                <Input
                    ref={ref}
                />
            </div>             
        </div>
    );
})

export default ExpandableInput;      

const Input = React.forwardRef<HTMLInputElement, IProps>(({
    props,
    ref
): JSX.Element => {
 
    return (
        <input
            ref={ref}
        />
    );
})


export default Input;

const ExpandableInput=React.forwardRef((
道具，
裁判
)：JSX.Element=>{
常量pickInputValue=（值：字符串）：void=>{
console.log（ref.current）//错误
console.log（ref）//输入引用
}
}
返回(
);
})
导出默认可扩展输入；

输入

const ExpandableInput = React.forwardRef<HTMLInputElement, IProps>((
   props,
   ref
): JSX.Element => {

    const pickInputValue = (value: string): void => {
        console.log(ref.current) // Error
        console.log(ref) // Input reference
        }
    }

    return (
        <div>
            <div>
                <Input
                    ref={ref}
                />
            </div>             
        </div>
    );
})

export default ExpandableInput;      

const Input = React.forwardRef<HTMLInputElement, IProps>(({
    props,
    ref
): JSX.Element => {
 
    return (
        <input
            ref={ref}
        />
    );
})


export default Input;

const Input=React.forwardRef(({
道具，
裁判
)：JSX.Element=>{
返回(
);
})
导出默认输入；

对于

forwardRef

接收的

ref

实际上有三个可能的值

type ForwardedRef<T> = ((instance: T | null) => void) | MutableRefObject<T | null> | null;

长版本：

// make sure that ref is a MutableRefObject
if (ref && "current" in ref) {
    // input has type HTMLInputElement | null
    const input = ref.current;
    // exlude null current value
    if (input) {
        // now we know that we have an input
        input.focus();
    }
}

---

我认为您应该使用上下文，而不是使用ref转发“我不知道如何告诉typescript ExpandableInput中的ref变量具有ref类型且不为null”，所以不要将

null

传递给

useRef

，也应该将沙盒作为问题。如果要访问输入值，不要使用refs，使用state，使输入受控组件