gpt4 book ai didi

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

转载 作者:行者123 更新时间:2023-12-05 02:12:19 26 4
gpt4 key购买 nike

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

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

我想做这样的事情,但无论我做什么,我似乎都无法从样式化组件中访问或设置 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 组件中使用)。

最佳答案

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

关于reactjs - 使用 useState-hook 从内部改变样式组件,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/56303069/

26 4 0
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com