Question

我试图用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

Answer 1

这只是一个错字。还需要再加上一个括号。

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

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

无法使React Springs的useSprings正常工作

1 个答案: