Javascript 如何加上「；参考文献；动态地使用react钩子？

所以我在中有一个数据数组，并且我正在用该数据生成一个组件列表。我想在每个生成的元素上有一个ref来计算高度。 我知道如何使用类组件，但我希望使用React钩子

下面是一个例子，说明我想做什么：

import React, {useState, useCallback} from 'react'
const data = [
  {
    text: 'test1'
  },
  {
    text: 'test2'
  }
]
const Component = () => {
  const [height, setHeight] = useState(0);
  const measuredRef = useCallback(node => {
    if (node !== null) {
      setHeight(node.getBoundingClientRect().height);
    }
  }, []);

  return (
    <div>
      {
        data.map((item, index) => 
          <div ref={measuredRef} key={index}>
            {item.text}
          </div>
        )
      }
    </div>
  )
}

import React，{useState，useCallback}来自“React”
常数数据=[
{
文本：“test1”
},
{
文本：“test2”
}
]
常量组件=（）=>{
const[height，setHeight]=useState（0）；
const measuredRef=useCallback（节点=>{
如果（节点！==null）{
setHeight（node.getBoundingClientRect（）.height）；
}
}, []);
返回(
{
data.map（（项目、索引）=>
{item.text}
)
}
)
}

您必须为每个项目使用一组单独的挂钩，这意味着您必须为这些项目定义一个组件（否则您在循环中使用挂钩，这是不允许的）

const Item=（{text}）=>{
const ref=useRef（）
const[height，setHeight]=useState（）
useLayoutEffect（（）=>{
setHeight（参考当前的getBoundingClientRect（）.height）
}, [])
返回{text}
}

我不确定我是否完全理解您的意图，但我认为您希望这样：

const{
useState，
useRef，
createRef，
使用效果
}=反应；
常数数据=[
{
文本：“test1”
},
{
文本：“test2”
}
];
常量组件=（）=>{
const[heights，setHeights]=useState（[]）；
const elementsRef=useRef（data.map（（）=>createRef（））；
useffect（（）=>{
const nextHeights=elementsRef.current.map(
ref=>ref.current.getBoundingClientRect（）高度
);
设置高度（次高）；
}, []);
返回(
{data.map（（项目，索引）=>(
{`${item.text}-height（${heights[index]}）`}
))}
);
};
const rootElement=document.getElementById（“根”）；
render（，rootElement）
.item{
框大小：边框框；
显示器：flex；
对齐项目：居中；
证明内容：中心；
边框：1px实心#ccc；
}
.项目-0{
高度：25px；
}
.项目-1{
高度：50px；
}
我创建了一个小小的
npm
包，它公开了一个
React Hook
来动态处理设置和获取引用，因为我经常遇到同样的问题

npm i use-dynamic-refs

这里有一个简单的例子

import React, { useEffect } from 'react';
import useDynamicRefs from 'use-dynamic-refs';

const Example = () =>  {
  const foo = ['random_id_1', 'random_id_2'];
  const [getRef, setRef] =  useDynamicRefs();

  useEffect(() => {
    // Get ref for specific ID 
    const id = getRef('random_id_1');
    console.log(id)
  }, [])

    return ( 
      <>
        {/* Simple set ref. */}
        <span ref={setRef('random_id_3')}></span>

         {/*  Set refs dynamically in Array.map() */}
        { foo.map( eachId => (
          <div key={eachId} ref={setRef(eachId)}>Hello {eachId}</div>))}
      </>
    )
}

export default Example;

import React，{useffect}来自“React”；
从“使用动态引用”导入useDynamicRefs；
常量示例=（）=>{
const foo=['random_id_1'，'random_id_2']；
const[getRef，setRef]=useDynamicRefs（）；
useffect（（）=>{
//获取特定ID的引用
const id=getRef（'random_id_1'）；
控制台日志（id）
}, [])
报税表（
{/*简单集ref.*/}
{/*在Array.map（）中动态设置引用*/}
{foo.map（eachId=>(
你好{eachId}}
)
}
导出默认示例；
我想可能有一种我看不到的方式。。。我是个新手。我想我将不得不使用类组件！谢谢你的回答！很抱歉，如果不清楚，您可以使用钩子来完成，只需在
数据中渲染
。map
这或多或少是我需要的。非常感谢。如果您使用的是钩子，那么应该使用useRef而不是createRef。如果数据是动态变化的（添加、删除），则不工作@akshayYou可以使用映射对象而不是array@giorgim如果数据是动态的，那么将其放入状态中谢谢您的建议。
import React, { useEffect } from 'react';
import useDynamicRefs from 'use-dynamic-refs';

const Example = () =>  {
  const foo = ['random_id_1', 'random_id_2'];
  const [getRef, setRef] =  useDynamicRefs();

  useEffect(() => {
    // Get ref for specific ID 
    const id = getRef('random_id_1');
    console.log(id)
  }, [])

    return ( 
      <>
        {/* Simple set ref. */}
        <span ref={setRef('random_id_3')}></span>

         {/*  Set refs dynamically in Array.map() */}
        { foo.map( eachId => (
          <div key={eachId} ref={setRef(eachId)}>Hello {eachId}</div>))}
      </>
    )
}

export default Example;