javascript - 反应弹簧 - 动画内容变化的要素

Question

以下代码是一个简单的 react 组件，它使用react-spring为p( animated.p) 元素设置动画。动画在常量中定义，并通过标签fadeIn分配给animated.p元素。style={fadeIn}

//returns and animates <p> elements:
function QuoteBox(props) {
  const fadeIn = useSpring({ opacity: 1, from: { opacity: 0 } });
  return (
    <>
    <blockquote>
      <animated.p id="text" style={fadeIn}>{props.quote}</animated.p>
    </blockquote>
    <animated.p id="author" style={fadeIn}>{props.author}<cite><em>{props.from}</em></cite></animated.p>
    </>
  );
}

当页面加载并将QuoteBox组件安装到 DOM 中时，useSpring将元素的不透明度animated.p从 0 更改为 1。但是，每次将新元素传递props给animated.p元素时，我都需要这样做，但我很难理解如何做那。

react-spring docs page上有一些简单的例子state，它使用组件的（ ）将不透明度从0更改为1 ，toggle反之亦然，但我不清楚如何将不透明度从0更改为1时间我传递一个新prop的animated.p元素。我只是想在它改变时获得一个简单的文本淡入。

抱歉之前的困惑问题，这对我来说可能有点太难了。另外，我不完全确定 react-spring 是一个不错的选择，对于我想要实现的目标来说，它似乎过于复杂。

标签： javascriptreactjsreact-spring

Answer 1

您可以使用 updater 函数语法来实现此目的。stop它使用返回初始属性的函数进行初始化，并返回允许覆盖初始属性的更新函数（以及此处未使用的函数）：

function QuoteBox(props) {
  const [fadeIn, set] = useSpring(() => ({ opacity: 0 }));

  React.useEffect(() => {
    set({ opacity: 1, from: { opacity: 0 }});
  }, [set, props.quote, props.author, props.from]);

  return (
    <>
      <blockquote>
        <animated.p id="text" style={fadeIn}>
          {props.quote}
        </animated.p>
      </blockquote>
      <animated.p id="author" style={fadeIn}>
        {props.author}
        <cite>
          <em>{props.from}</em>
        </cite>
      </animated.p>
    </>
  );

这将有效地重置安装时的动画以及道具更改的每个后续重新渲染。React（或 ESlint）可能会抱怨上面的使用，useEffect因为实际上没有一个 prop 值被使用，我们只是在观察它们的变化，因为它似乎暗示动画应该重新运行。

您可以通过以下方式避免这种情况：

备忘：

const MemoQuoteBox = React.memo(QuoteBox);

由于所有的 props 都是字符串（一种简单的数据类型，值相等，而不是像对象或数组这样的引用），您可以按原样记忆组件，并且仅在其中一个更改时才会重新呈现。这将允许您删除依赖数组，因为现在组件只会在 prop 更改时更新：

React.useEffect(() => {
  set({ opacity: 1, from: { opacity: 0 }});
});

如果您将来要向该组件传递更多道具，那可能并不理想。

参考：

const currString = props.quote + props.author + props.from;
const prevString = React.useRef(currString);

React.useEffect(() => {
  if (currString === prevString.current) return;
  set({ opacity: 1, from: { opacity: 0 }});
  prevString.current = currString;
}, [set, currString]);

现在我们正在使用传递的值 ESlint 不应该抛出警告。我利用道具都是字符串的事实将它们连接在这里（因为它们在概念上是相互关联的），但如果你将它们分开，原理是一样的。

肮脏的回报：

只需直接从效果中返回值，ESlint 应该将它们视为“已使用”，尽管此时您也可以使用eslint-disable-next-line：

React.useEffect(() => {
  set({ opacity: 1, from: { opacity: 0 }});
  return props.quote + props.author + props.from;
}, [set, props.quote, props.author, props.from]);