Javascript 引用的映射，当前始终为空

我正在创建一组页面，这些页面是动态创建的。每个页面都有一个我想在特定时间调用的函数，但是当尝试访问页面的ref时，当前值总是空的

export default class QuizViewPager extends React.Component<QuizViewPagerProps, QuizViewPagerState> {

    quizDeck: Deck | undefined;
    quizRefMap: Map<number, React.RefObject<Quiz>>;
    quizzes: JSX.Element[] = [];
    viewPager: React.RefObject<ViewPager>;

    constructor(props: QuizViewPagerProps) {
        super(props);
        this.quizRefMap = new Map<number, React.RefObject<Quiz>>();
        this.viewPager = React.createRef<ViewPager>();
        this.state = {
            currentPage: 0,
        }
        for (let i = 0; i < this.quizDeck!.litems.length; i++) {
            this.addQuiz(i);
        }
    }

    setQuizPage = (page: number) => {
        this.viewPager.current?.setPage(page);
        this.setState({ currentPage: page })
        this.quizRefMap.get(page)?.current?.focusInput();
    }

    addQuiz(page: number) {
        const entry = this.quizDeck!.litems[page];
        var ref: React.RefObject<Quiz> = React.createRef<Quiz>();
        this.quizRefMap.set(page, ref);
        this.quizzes.push(
            <Quiz
                key={page}
                litem={entry}
                index={page}
                ref={ref}
                pagerFocusIndex={this.state.currentPage}
                pagerLength={this.quizDeck?.litems.length!}
                setQuizPage={this.setQuizPage}
                navigation={this.props.navigation}
                quizType={this.props.route.params.quizType}
                quizManager={this.props.route.params.quizType === EQuizType.Lesson ? GlobalVars.lessonQuizManager : GlobalVars.reviewQuizManager}
            />
        )
    }

    render() {
        return (
            <View style={{ flex: 1 }}>
                <ViewPager
                    style={styles.viewPager}
                    initialPage={0}
                    ref={this.viewPager}
                    scrollEnabled={false}
                >
                    {this.quizzes}
                </ViewPager>
            </View >
        );
    }
};

导出默认类QuizViewPager扩展React.Component{
quizDeck：甲板|未定义；
魁兹列夫地图：地图；
测验：JSX.Element[]=[]；
viewPager:React.reObject；
构造器（道具：QuizViewPagerProps）{
超级（道具）；
this.quizRefMap=新映射（）；
this.viewPager=React.createRef（）；
此.state={
当前页面：0，
}
for（设i=0；i{
此.viewPager.current？.setPage（第页）；
this.setState（{currentPage:page}）
此.quizRefMap.get（第页）？.current？.focusInput（）；
}
addquick（第页：编号）{
const entry=this.quizDeck！.litems[page]；
var ref:React.reobject=React.createRef（）；
此.quizRefMap.set（第页，参考号）；
这个。测验。推(
)
}
render（）{
返回(
{这个。测验}
);
}
};

---

您可以在

addquick（）

中看到，我正在创建一个ref，将其推到地图中，并将该ref传递到

quick

组件中。但是，当尝试访问

setQuizPage（）

中的任何引用时，该映射中充满了当前属性为空的引用。

总之，所使用的

ViewPager

库实际上并没有呈现您传递它的子对象

如果我们查看

ViewPager

（react native ViewPager）的源代码，我们将看到

childrenwithoverridednstyle（this.props.children）}

（）。如果我们深入研究

childrenwithoverridedStyle

方法，我们将看到它实际上是通过

React.createElement

传入的

通过创建一个小演示，可以相对容易地测试传递给这些组件的

ref

是否会被保留：

constlogref=（元素）=>{
console.log（“logRef”，元素）；
};
const ChildrenCreator=（道具）=>{
返回(
{props.children}
{React.Children.map（props.Children，（child）=>{
console.log（“创建新”，子级）；
让newProps={
…儿童道具，
创造：“真实”
};
返回React.createElement（child.type，newProps）；
})}
);
};
常量应用=（）=>{
返回(
你好，世界
今天天气真好

);
}
ReactDOM.render（）

如果我们在运行此命令时查看控制台，我们将能够看到来自
logRef
的输出仅显示第一个未复制的h1标记，而不是复制的第二个标记

虽然这并不能解决问题，但这至少回答了为什么地图中的参照为空的问题。实际上，可能值得为库创建一个问题，以便将其交换到
React.cloneElement
，因为
cloneElement
将保留
ref
是一个功能组件还是一个类？它也是一个类组件。
ViewPager
是否呈现所有子级，还是基于页面有选择地呈现？这可能会阻止装载
测验
es。目前，它应该一次呈现所有这些测验。在构造函数中，我在for循环中创建所有测验，然后在renderi中抛出JSX元素数组。如果是，您可以尝试在viewpager使用
onPageSelected
回调导航到输入后集中输入，而不是在
setQuizPage
方法中进行：
{this.quizRefMap.get（pageIndex）？.current？.focusInput（）}}…>谢谢你的提示。我会尝试分叉，并作出改变，看看它是否修复它，以及。