使用Usestate-Hook从内部更改样式组件

我正在制作一个要在我的项目中使用的组件库 - 我以前与样式组件相当多，这是我将样式应用于组件的首选方法。我最喜欢它的是使我的组件能够使我的组件完全实用且独立。

我有一个我真的无法解决令人满意的问题。

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

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钩子，这使我们不使用类组件(问题的答案基本上说，类型的组件不能在类组件中使用(。

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

您是否尝试使用钩子有条件地设置className？这样的东西...

import React, { useState } from 'react';
import styled from 'styled-components';
const ButtonStyled = styled('button')`
  .className {
    color: red;
}
`
export const Button = () => {
  const [clicked, setClicked] = useState(false);
  return (
    <ButtonStyled className={clicked ? 'className' : ''} clicked={clicked} onClick={() => setClicked(!clicked)}>
      {this.props.children}
    </ButtonStyled>
)}

或，如果您从样式组件中导入css属性，则可以执行类似的操作。

import React, { useState } from 'react';
import styled, { css } from 'styled-components'
const ButtonStyled = styled('button')`
  ${({ clicked }) =>
    clicked &&
    css`
      color: red;
    }
`
export const Button = () => {
  const [clicked, setClicked] = useState(false);
  return (
    <ButtonStyled clicked={clicked} onClick={() => setClicked(!clicked)}>
      {this.props.children}
    </ButtonStyled>
)}

我要发布更多的目的，这是我去年某个时候找到的解决方案，我几乎丢失了这个技巧的项目。

解释：因此，要将变量传递到CSS中，您必须使用CSS" VAR"。完成此操作后，您可以通过简单地输入变量名称来使用CSS中任何地方的自定义变量。如果您无法从JavaScript代码传递值，则您甚至可以给变量一个默认值。

警告我使用Make Mern应用程序，这意味着我在React中这样做。我绝不是Gurantee，这将在Angular，jQuery，Pure JS或任何其他JavaScript变体中起作用。但这应该是因为它是CSS而不是JavaScript。

解决方案在您的JavaScript代码中：

import React, {useState, useEffect} from "react";
import "./Example.CSS"
export default function Example(){
    const [value, setValue] = useState('green')
    useEffect(()=>{
        document.querySelector('.example').style.setProperty('--color',value)
    },[value])
    return <div classname="example">
        <button onClick={()=>value==='green'?setValue('red'):setValue('green')}>
            Change Background Color
        </button>
    </div>
}

然后在您的CSS中，您可以这样称呼：

div{
    background: var(--color,'grey')
    border: var(--color)
}

您可以根据需要在JavaScript变量中添加尽可能多的新键值对(err，以及计算机和文本编辑器可以处理的许多键(。如果需要一个默认值，则可以使用逗号添加它，否则，只需正常调用它即可。我确定我只是刮擦了此组件的使用表面，但是对于这种有用的工具而言，它奇怪地没有记载。我发现这个比使用内联样式更好。

相关内容

最新更新

热门标签：