Javascript React Refs不与高阶组件(HOC)中的动态生成组件一起工作

发布于02月01日

我遇到了一个关于Reaction裁判的问题，这有点令人困惑.我有一个更高级别的组件(HOC)，它基于props 动态生成子组件，我正在try 使用Ref来访问这些子组件.然而，裁判似乎没有得到适当的设置，我不知道为什么.

以下是我的代码的简化示例:

import React, { useRef, useEffect } from 'react';

const DynamicComponent = ({ name }) => {
  // Some component logic here...
  return <div>{name}</div>;
};

const HOC = ({ dynamicComponentProps }) => {
  const dynamicRef = useRef();

  useEffect(() => {
    console.log(dynamicRef.current); // This logs 'null'
    // Some other logic with dynamicRef.current...
  }, [dynamicRef.current]);

  const renderDynamicComponent = () => {
    return dynamicComponentProps.map((props, index) => (
      <DynamicComponent ref={dynamicRef} key={index} {...props} />
    ));
  };

  return <div>{renderDynamicComponent()}</div>;
};

const App = () => {
  const dynamicComponentProps = [
    { name: 'Component A' },
    { name: 'Component B' },
    { name: 'Component C' },
  ];

  return <HOC dynamicComponentProps={dynamicComponentProps} />;
};

在HOC内部的useEffect块中，dynamicRef.current始终为null，即使组件已渲染.我是不是遗漏了动态生成组件中的引用的某些方面，或者有没有更好的方法来实现我想要做的事情？

What I Tried:个

我try 在基于props 动态生成子组件的高阶组件(HOC)中使用Reaction Ref.我在HOC中创建了一个ref(dynamicRef)，并将其分配给每个动态生成的子组件.

What I Expected:个

我希望当我访问useEffect块中的dynamicRef.current时，它将指向最后一个动态生成的子组件，从而允许我执行操作或访问该组件的属性.

What Actually Resulted:

令人惊讶的是，当我记录dynamicRef.current时，它总是显示null，这表明裁判没有正确设置.尽管呈现了组件，但引用并没有指向任何组件.

import React, { useRef, useEffect } from "react"; const DynamicComponent = React.forwardRef(({ name }, ref) => { // Some component logic here... return <div ref={ref}>{name}</div>; }); const HOC = ({ dynamicComponentProps }) => { const dynamicRefs = dynamicComponentProps.map(() => useRef(null)); useEffect(() => { dynamicRefs.forEach((ref) => { console.log(ref.current); // This should log the div element // Some other logic with ref.current... }); }, [dynamicRefs]); const renderDynamicComponent = () => { return dynamicComponentProps.map((props, index) => ( <DynamicComponent ref={dynamicRefs[index]} key={index} {...props} /> )); }; return <div>{renderDynamicComponent()}</div>; }; const App = () => { const dynamicComponentProps = [ { name: "Component A" }, { name: "Component B" }, { name: "Component C" }, ]; return <HOC dynamicComponentProps={dynamicComponentProps} />; }; export default App;

import React, { useRef, useEffect } from "react"; const DynamicComponent = React.forwardRef(({ name }, ref) => { // Some component logic here... return <div ref={ref}>{name}</div>; }); const HOC = ({ dynamicComponentProps }) => { const dynamicRefs = useRef( dynamicComponentProps.map(() => ({ current: null })) ); useEffect(() => { dynamicRefs.current.forEach((ref) => { console.log(ref.current); // This should log the div element // Some other logic with ref.current... }); }, [dynamicRefs.current]); const renderDynamicComponent = () => { return dynamicComponentProps.map((props, index) => ( <DynamicComponent ref={dynamicRefs.current[index]} key={index} {...props} /> )); }; return <div>{renderDynamicComponent()}</div>; }; const App = () => { const dynamicComponentProps = [ { name: "Component A" }, { name: "Component B" }, { name: "Component C" }, ]; return <HOC dynamicComponentProps={dynamicComponentProps} />; }; export default App;

Javascript React Refs不与高阶组件(HOC)中的动态生成组件一起工作

推荐答案

Javascript相关问答推荐

使用JavaScript单击上一个或下一个特定按钮创建卡滑动器以滑动单个卡

每次子路由重定向都会调用父加载器函数

IMDB使用 puppeteer 加载更多按钮(nodejs)

如何解决CORS政策的问题

基于变量切换隐藏文本

useNavigation更改URL，但不呈现或显示组件

在网页上添加谷歌亵渎词

更改JSON中使用AJAX返回的图像的路径

Regex结果包含额外的match/group，只带一个返回

如何强制Sphinx中的自定义js/css文件始终加载更改而不缓存？

这个值总是返回未定义的-Reaction

Next.js服务器端组件请求，如何发送我的cookie token？

提交链接到AJAX数据结果的表单

如何在箭头函数中引入or子句？

当标题被点击时，如何使内容出现在另一个div上？

将基元传递给THEN处理程序

无法读取未定义的属性(正在读取合并)-react RTK

构建器模式与参数对象输入

是否设置以JavaScript为背景的画布元素？

如何为两条动态路由创建一个页面？