Передача значений в React Spring + стилизованные компоненты (интерполяция) - PullRequest
Новая
       23

Передача значений в React Spring + стилизованные компоненты (интерполяция)

0 голосов
/ 21 февраля 2020

У меня есть кнопка пончика. Это стилизованный компонент + анимированная пружина : 

const Donut = styled(animated.button)`
  position: absolute;
  bottom: 0;
  width: 100px;
  right: 50%;
  margin-right: -50px;
  padding: 10px;
  border: 1px solid blue;
  background-color: pink;
  box-shadow: 2px 2px black;
  color: blue;`;

Я инициализирую реактивную пружину с помощью крючков, например: 

const [{ y }, set] = useSpring(() => ({
    y: 50,
    config: config.wobbly
  }));

И затем где-то есть div, который устанавливает и снимает значение y 

  <div
        onMouseEnter={() => set({ y: -50, opacity: 1 })}
        onMouseLeave={() => set({ y: 50, opacity: 0 })}
      >

Я помещаю все в свой компонент так: 

<Donut style={{ transform: y.interpolate(v => `translateY(${v}%`) }} />

Пока все работает. Он двигается вверх и вниз.

Мой вопрос:

Я бы не хотел использовать inline-стили. Поэтому я хочу переместить все в стилизованный компонент.

Я пробовал это: 

<Donut y={y} />

и в моем стилизованном компоненте добавил это: 

${props => props.y.interpolate(v => `transform: translateY(${v}%`)};

Это не не работает Есть идеи?

PS: props.y существует ли в стилизованном компоненте, и кажется, что он получает объект Animated , а не одно значение , Поэтому я, должно быть, делаю что-то не так. Все учебники в Интернете, которые я нашел, были немного более базовыми c, но не касались интерполяции с реактивной пружиной + стилевыми компонентами

...