0

我正在尝试使用 React Spring 为列表中项目的位置变化设置动画。

让一个项目淡入useSpring很简单：

function App() {
  const [items, setItems] = React.useState([0, 1]);

  const handleClick = () => {
    if (items[0] === 0) {
      setItems([1, 0]);
    } else {
      setItems([0, 1]);
    }
  };

  const props = useSpring({ opacity: 1, from: { opacity: 0 } });

  return (
    <>
      <animated.div style={props}>
        <button type="button" onClick={handleClick}>
          click
        </button>
      </animated.div>
      <ul className="App">
        {items.map(item => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </>
  );
}

但是，当我尝试使用时useSprings，出现错误：

function App() {
  const [items, setItems] = React.useState([0, 1]);

  const handleClick = () => {
    if (items[0] === 0) {
      setItems([1, 0]);
    } else {
      setItems([0, 1]);
    }
  };

  const springs = useSprings(items.length, items.map(item => ({ opacity: item.opacity }))

  return (
    <>
      <button type="button" onClick={handleClick}>
        click
      </button>
      <ul className="App">
        {items.map(item => {
          return <li key={item}>{item}</li>;
        })}
      </ul>
    </>
  );
}

https://codesandbox.io/s/wonderful-oskar-v04vw

/src/index.js：意外的令牌，预期的“，”

文档没有详细说明：https ://www.react-spring.io/docs/hooks/use-springs

4

1 回答 1

0

这只是一个错字。还需要一个右括号。

编辑：我也修复了其余的代码，但我不知道你想要实现什么。您可以在数组中为每个元素定义不同的样式属性并更改它们。

function App() {
  const [items, setItems] = React.useState([0, 0.5, 1]);

  const handleClick = () => {
    if (items[0] === 0) {
      setItems([1, 0.5, 0]);
    } else {
       setItems([0, 0.5, 1]);
    }
  };

  const springs = useSprings(
    items.length,
    items.map(item => ({ opacity: item }))
  );

  return (
    <>
      <button type="button" onClick={handleClick}>
        click
      </button>
      <ul className="App">
        {springs.map((props, i) => {
          return (
            <animated.li style={props} key={i}>
              {i}
            </animated.li>
          );
        })}
      </ul>
    </>
  );
}

更新的沙箱：https ://codesandbox.io/s/lucid-brown-ep7i7

于 2019-06-26T12:47:07.630 回答