我需要将子组件的引用传递给 javascript 中的父组件

Question

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

charAnim 使用 用于特定动画的 useTrail ，我需要在我的 App.js 组件中使用它。我在 App.js 组件中有 另一个 spring 动画 ，我想 将其与 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,  
});

Answer 1

你可以在父级（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} />
  );
};

我需要将子组件的引用传递给 javascript 中的父组件

I need to pass the ref of a child component to a parent in javascript

html

javascript

reactjs

react-spring

react-hooks