Не удается заставить работать пружины React Springs. - PullRequest
Новая
       18

Не удается заставить работать пружины React Springs.

0 голосов
/ 26 июня 2019

Я пытаюсь объявить изменение позиции элементов в списке с помощью 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

1 Ответ

0 голосов
/ 26 июня 2019

Это просто опечатка. Требуется еще одна закрывающая скобка.

Редактировать: Я также исправил остальную часть кода, но я не знаю, чего вы хотите достичь. Вы можете определить различные атрибуты стиля в массиве для каждого элемента и изменить их. 

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

...