时间戳

首页 > 解决方案 > 在平面列表项中未定义 React Native 对元素的引用

javascript - 在平面列表项中未定义 React Native 对元素的引用

问题描述

我试图在渲染平面列表时获取元素的引用，但引用返回为未定义。请参阅下面的相关代码：

构造函数：

constructor(props) {
    super(props);

    this.modalRef = createRef();
}

渲染项：

_renderItem = ({ item }, context) => {
    const modalRef = context.modalRef.current; // Why is context.modalRef.current null?
    let onPress = () => alert("Something went wrong...");

    return (
        <View style={styles.item}>
            <ListItemCard
                id={item.id}
                value="Some value.."
                onPress={onPress()}
            />
        </View>
    );
};

在渲染函数中：

屏幕上的模态：

    <Modal
    ref={this.modalRef}
    text="Some text.."
    onPressClose={() =>
        this.modalRef.current.close()
    }
/>

平面列表：

  <FlatList
    data={data}
    renderItem={item => this._renderItem(item, this)}
    keyExtractor={(item, index) => index.toString()}
/>

标签： javascriptreactjsreact-nativeecmascript-6

解决方案

modalRef.current是null因为引用是在组件安装时分配的Modal。我假设在_renderItems调用函数时未安装组件。

我建议您在不呈现组件的函数中使用 ref，例如事件处理程序。那里的ref变量应该有对组件的引用。

推荐阅读