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

问题描述

我正在制作一个组件库以在我的项目中使用 - 我之前已经使用 styled-components 进行了大量工作，这是我将样式应用于组件的首选方式。我最喜欢它的是能够使我的组件功能齐全且独立。

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

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

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 钩子，它允许我们不使用 Class 组件（问题的答案基本上是说 styled-components 不能在 Class 组件中使用）。

标签： reactjsreact-hooksstyled-components

styled()不能指内部状态。不管它是类this.state还是函数和useState钩子。处理这个问题的唯一方法是将组件分成两部分：第一个处理状态更改，另一个处理基于 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}
`;

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

问题描述

解决方案

推荐阅读