reactjs - 使用 useState-hook 从内部改变样式组件

Question

我正在制作一个要在我的项目中使用的组件库 - 我以前使用过样式组件，这是我将样式应用到组件的首选方式。我最喜欢它的是能够使我的组件功能齐全且独立。

我有一个问题，但我还没有真正能够令人满意地解决。

我想做这样的事情，但无论我做什么，我似乎都无法从样式化组件中访问或设置 Prop 。

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}
     }
  }
`;

编辑:建议的链接问题不适用。第一个相关问题是一个人本质上是在询问如何将 props 传递给他的子组件。第二个问题类似，但答案已经过时，因为它早于允许我们不使用 Class 组件的 useState 钩子(Hook)(问题的答案基本上是说 styled-components 不能在 Class 组件中使用)。

Answer 1

styled() 不能引用内部状态。不管是类和this.state 还是函数和useState 钩子(Hook)都没有关系。处理这个问题的唯一方法是将组件分成两部分:第一个处理状态变化，另一个根据 props 封装变化。

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}
`;