javascript 如何在React中使用子组件的动态值

hc8w905p 于 2023-03-06 发布在 Java

关注(0)|答案(1)|浏览(133)

考虑React Remix项目（功能组件）中的以下（最小）代码

<Parent>
  <Child1 />
  <Child2
    <div1></div1>
    <div2></div2>
   />
  <Child3 />
</Parent>

我已经成功地从Child 2组件内部使用useElementSize()钩子动态获取了div 1的高度值（已将ref附加到它），如下所示：

const [squareRef, { height }] = useElementSize();

return (
  <section className="flex flex-col w-full">
    <p className="mx-auto text-5xl font-bold">{height}</p>
    <div className="w-full bg-black" ref={squareRef}>
    ...
);

但是我需要在父组件内部使用这个高度值，以便将条件样式应用到Child 1和Child 3。任何建议都将不胜感激，谢谢！
我已经尝试使用callback和lifting up状态，以及useContext，所有这些都是按照React文档进行的，但我认为我走错了路。我也相信我可能会使问题过于复杂，但我已经卡住了几天。

JavaScript

来源：https://stackoverflow.com/questions/75642574/how-to-use-a-dynamic-value-from-child-component-in-react

1条答案

按热度按时间

bz4sfanl1#

我认为您在这里要做的是使用您在父组件then you will be able to use React.forwardRef中使用的钩子将该ref传递给功能组件（子组件2），然后该组件将该ref附加到您感兴趣的div。
非常肯定这给了你你正在寻找的，最终这是React的方式，让你通过裁判下来几乎像一个 prop 。
从文档中你的代码最终看起来像...

// Parent file
const ref = useRef(null) // or whatever hook you want

return <Child2 ref={ref} />

// Child2 file
const Child2 = forwardRef(function Child2(props, ref) {
  ...
  return <div ref={ref}>This is the div I want</div>
});

赞(0）回复(0）举报 2023-03-06

我来回答

javascript 如何在React中使用子组件的动态值

1条答案

相关问题

热门标签

最新问答