时间戳

首页 > 解决方案 > 我需要将子组件的 ref 传递给 javascript 中的父组件

javascript - 我需要将子组件的 ref 传递给 javascript 中的父组件

问题描述

所以，我一直在一个网站上工作，而且我是 react-spring 的新手，所以，我遇到了这个问题：我有一个主要的 App.js 组件，我在其中组装了所有其他组件，我还有另一个名为 CharAnim 的组件.jsx 在我的“src/components”文件夹下。

charAnim 对特定动画使用useTrail ，我需要在我的 App.js 组件中使用它。我在 App.js 组件中有另一个弹簧动画，我想将它与 CharAnim 组件中的动画链接起来。

为此，我需要在 charAnim 组件中获取动画的 ref var。我怎么做？请帮忙

charAnim 内部

const newTrail = useTrail(charArr.length, {
ref:self_animStyle_ref, //I have set this to const self_animStyle_ref = useRef(); which i need to pass to my app.js
to:{transform:`translateX(0px) translateY(0px)`,opacity:1},
from:{transform:`translateX(${xTrans}px) translateY(${yTrans}px)`,opacity:0},
config:config.gentle,  
});

标签： javascripthtmlreactjsreact-hooksreact-spring

解决方案

您可以在父级（App）中创建 ref，并将其传递给CharAnim组件（我使用过ref forwarding，但不是必须的），然后您可以useChain()在父级中使用。

示例（未测试）：

const CharAnim = forwardRef((props, ref) => {
  const newTrail = useTrail(charArr.length, {
    ref,
    to: {transform:`translateX(0px) translateY(0px)`,opacity:1},
    from: {transform:`translateX(${xTrans}px) translateY(${yTrans}px)`,opacity:0},
    config: config.gentle,  
  });
  
  return (
    // JSX
  )
});

const App = () => {
  const charAnimRef = useRef();
  const appAnimRef = useRef();
  
  useChain([charAnimRef, appAnimRef])

  return (
    <CharAnim {...otherProps} ref={charAnimRef} />
  );
};

推荐阅读