Использование useState-hook для изменения styleled-компонентов изнутри

Question

Я делаю библиотеку компонентов для использования в моем проекте - я раньше довольно много работал со стилевыми компонентами, и это мой предпочтительный способ применения стилей к моим компонентам.Что мне больше всего нравится в этом, так это возможность сделать мои компоненты полностью функциональными и автономными.

У меня есть одна проблема, которую я не смог решить удовлетворительно.

Iхочу сделать что-то вроде этого, но что бы я ни делал, я не могу получить доступ или установить реквизиты из компонента styled-компонента.

import React, { useState } from 'react';
import styled from 'styled-components';

const Button = ({ className }) => {
  const [clicked, setClicked] = useState(false);
  return (
    <button className={className} clicked={clicked} onClick={() => setClicked(!clicked)}>
      {this.props.children}
    </button>
  );
};

export default styled(Button)`
  ${applySomeStyle}
  ${props => props.clicked} {
    ${applySomeOtherStyle}
  }
`;

Я смог «решить» это, выполнив это, но кажется невероятным излишним создавать фиктивный компонент только для этой цели.Казалось бы, более естественным было бы просто сделать то, что я делаю в примере № 1.

import React, { useState } from 'react';
import styled from 'styled-components';

const Dummy = styled.button``;

const Button = ({ className }) => {
  const [clicked, setClicked] = useState(false);
  return (
    <Dummy className={className} clicked={clicked} onClick={() => setClicked(!clicked)}>
      {this.props.children}
    </Dummy>
  );
};

export default styled(Button)`
  ${applySomeStyle}
  ${Dummy} {
     ${props => props.clicked} {
       ${applySomeOtherStyle}
     }
  }
`;

РЕДАКТИРОВАТЬ: Предлагаемые связанные проблемы не применимы.Первая связанная проблема - это человек, который по сути спрашивает, как передать реквизит его дочерним компонентам.Вторая проблема похожа, но ответы устарели, потому что она предшествует ловушке useState, которая позволяет нам не использовать компоненты класса (ответ на проблему в основном говорит о том, что стилевые компоненты нельзя использовать в компонентах класса).

Answer 1

styled() не может относиться к внутреннему состоянию. Неважно, если это класс и this.state или функция и useState ловушка. Единственный способ справиться с этим - разделить компонент на два: первый для обработки изменений состояния, а другой - для инкапсуляции изменений на основе реквизита.

import React, { useState } from 'react';
import styled from 'styled-components';

const InnerButton = styled(button)`
  ${props => props.clicked} {
    ${applySomeOtherStyle}
  }
`;

const Button = ({ className }) => {
  const [clicked, setClicked] = useState(false);
  return (
    <InnerButton className={className} clicked={clicked} onClick={() => setClicked(!clicked)}>
      {this.props.children}
    </InnerButton>
  );
};

export default styled(Button)`
  ${applySomeStyle}
`;