Javascript React本机Typescript键入“为”；“向后”；卷轴视图

我有一个

ScrollView

，它先是作为JavaScript工作，然后又作为TypeScript工作；此

ScrollView

使用

ref

属性捕获

ScrollView

的引用，然后调用其函数之一

scrollToEnd（）

。但是我最近加强了我的linting，我需要找出正确的方法来将这个引用属性实例类型化

我从这个开始：

import React from "react";
import {ScrollView, StyleProp, ViewStyle} from "react-native";

const standardStyle = {flex:1, backgroundColor:'black'};

export default class ViewClass {
    static produceBackwardScrollingView(customStyle : StyleProp<ViewStyle>, contents : any, horizontal : boolean) {
        let scrollView : any;
        return (
            <ScrollView
                nestedScrollEnabled={true}
                ref={ref => {
                scrollView = ref
            }}
                onContentSizeChange={() => scrollView.scrollToEnd({animated: true})}
                style={[standardStyle, customStyle]}
                horizontal={horizontal}>{contents}</ScrollView>
        );
    }
}

从“React”导入React；
从“react native”导入{ScrollView，StyleProp，ViewStyle}；
conststandardstyle={flex:1，backgroundColor:'black'}；
导出默认类ViewClass{
静态ProduceBackardScrollingView（customStyle:StyleProp，Content:any，horizontal:boolean）{
让我们看看：任何；
返回(
{
scrollView=ref
}}
onContentSizeChange={（）=>scrollView.scrollToEnd（{animated:true}）}
样式={[standardStyle，customStyle]}
水平={horizontal}>{contents}
);
}
}

在与类型进行了大量的斗争之后，我提出了这个我认为是正确的方向，但是我仍然得到了类型脚本错误

import React from "react";
import {ScrollView, StyleProp, ViewStyle} from "react-native";

const standardStyle = {flex:1, backgroundColor:'black'};

export default class ViewClass {
    static produceBackwardScrollingView(customStyle : StyleProp<ViewStyle>, contents : any, horizontal : boolean) {
        let scrollView : React.RefObject<ScrollView> | ScrollView | null = React.createRef();
        return (
            <ScrollView
                nestedScrollEnabled={true}
                ref={ref => {
                    // below: scrollView maybe assigned "ScrollView" or "null"
                    scrollView = ref
                }}
                // below: scrollView is possibly null
                // also below: "Property 'scrollToEnd' does not exist on type 'ScrollView | RefObject<ScrollView>'."
                onContentSizeChange={() => scrollView.scrollToEnd({animated: true})}
                style={[standardStyle, customStyle]}
                horizontal={horizontal}>{contents}</ScrollView>
        );
    }
}

从“React”导入React；
从“react native”导入{ScrollView，StyleProp，ViewStyle}；
conststandardstyle={flex:1，backgroundColor:'black'}；
导出默认类ViewClass{
静态ProduceBackardScrollingView（customStyle:StyleProp，Content:any，horizontal:boolean）{
让scrollView:React.ReObject | scrollView | null=React.createRef（）；
返回(
{
//下面：scrollView可能被指定为“scrollView”或“null”
scrollView=ref
}}
//下图：scrollView可能为空
//下面还有：“类型“ScrollView | ReObject”上不存在属性“scrollToEnd”
onContentSizeChange={（）=>scrollView.scrollToEnd（{animated:true}）}
样式={[standardStyle，customStyle]}
水平={horizontal}>{contents}
);
}
}

我的场景当然使用了

ScrollView

，因此我想是否有更好的方法让

ScrollView

从底部开始，这可能会修复本例中的代码。但我认为这个问题是可以概括的，因为实际上我的主要问题是我不能弄清楚我的对象引用需要什么类型，以及如何调用它上的函数

---

注意：我对React Native和TypeScript还不熟悉，所以我可能会慢慢跟上。

您的代码将ref对象的值与ref对象本身混为一谈。ref是一个对象，其属性

current

包含您保存的值。您的类型

让scrollView:React.reObject | scrollView

表示它可以是组件本身或该组件的引用。这就是为什么你会犯这些错误

有多种方法可以实现ref，但让我们继续使用

React.createRef

创建ref。这将创建一个ref对象，我们使用它来存储组件ref。为了清晰起见，我将重命名它

scrollRef

const scrollRef = React.createRef<ScrollView>(); // has type React.RefObject<ScrollView>

对于

ScrollView

的

ref

道具，我们可以传递整个ref对象

ref={scrollRef}

综上所述，我们得到：

export default class ViewClass {
    static produceBackwardScrollingView(customStyle : StyleProp<ViewStyle>, contents : any, horizontal : boolean) {
        const scrollRef = React.createRef<ScrollView>();
        return (
            <ScrollView
                nestedScrollEnabled={true}
                ref={scrollRef}
                onContentSizeChange={() => scrollRef.current?.scrollToEnd({animated: true})}
                style={[standardStyle, customStyle]}
                horizontal={horizontal}>{contents}</ScrollView>
        );
    }
}

导出默认类ViewClass{
静态ProduceBackardScrollingView（customStyle:StyleProp，Content:any，horizontal:boolean）{
const scrollRef=React.createRef（）；
返回(
scrollRef.current？.scrollToEnd（{animated:true}）}
样式={[standardStyle，customStyle]}
水平={horizontal}>{contents}
);
}
}

---

就像魔法一样！你是对的，我不认为TypeScript推断类型的能力；相当整洁。还有可选的链接

？。

很棒，我不知道TypeScript有一个Elvis操作符。再次感谢你，琳达。

export default class ViewClass {
    static produceBackwardScrollingView(customStyle : StyleProp<ViewStyle>, contents : any, horizontal : boolean) {
        const scrollRef = React.createRef<ScrollView>();
        return (
            <ScrollView
                nestedScrollEnabled={true}
                ref={scrollRef}
                onContentSizeChange={() => scrollRef.current?.scrollToEnd({animated: true})}
                style={[standardStyle, customStyle]}
                horizontal={horizontal}>{contents}</ScrollView>
        );
    }
}