设置反应元素激活答案

【问题标题】：Set react element active设置反应元素激活
【发布时间】：2020-03-27 15:12:01
【问题描述】：

我正在尝试使用不同颜色激活元素，但它不起作用。有人可以帮助我吗？如果它有效，可能每个元素都会改变颜色，我怎么能用“这个”或任何其他东西来做到这一点。这就是我的元素和我的状态：

//-> 我的状态：我使用 true 作为默认值，因为我试图让它工作，但我失败了

export default function VertNavigation() {

 const [active, setActive] = useState(true);
 console.tron.log(active);
 return (
   <Container>
     <button type="button">DEPOSITAR</button>
     <QuickNavi>
       <VerticalNavigation>
         <Title>ACESSO RÁPIDO</Title>

         <li>
           <Icon.MdMonetizationOn size={20} />
           <p>Emitir Cobrança</p>
         </li>
         <li>
           <Icon.GoGraph size={20} active={active} />
           <p>Gestão de cobrança</p>
         </li>
         <li>
           <Icon.MdCompareArrows size={20} />
           <p>Tranferencia</p>
         </li>
         <li>
           <Icon.FaBarcode size={20} />
           <p>Pagamentos</p>
         </li>

// -> my styled component -- its always in "else", i don't know why
  export const VerticalNavigation = styled.ul`
 width: 100%;
 height: 100%;

 li:nth-child(4)::after {
   content: 'novo';
   right: 0;
   margin-left: 6px;
   text-align: center;
   font-size: 12px;
   top: 10px;
   width: 45px;
   height: 15px;
   background: #47b248;
   color: #fff;
   border-radius: 10px 10px 10px 10px;
 }

 li {
   width: 100%;
   height: 45px;
   display: flex;
   align-items: center;
   cursor: pointer;

   &:hover svg {
     transform: translateY(-5px);
     color: #47b248;
   }

   svg {
     transition: 0.3s ease;
     color: ${props => (props.active ? '#47B248' : '#939393')};
   }

   p {
     padding-left: 15px;
     font-size: 15px;
     color: ${darken(0.5, '#A6A6A5')};
   }
 }
`;

提前谢谢你。

【问题讨论】：

props.active 不存在
请发布一个完整的例子。您可能需要 SVG 上的 fill: currentColor
尝试将#939393 更改为任何其他颜色，例如红色的。你的图标颜色变了吗？即您确定 color 属性在您的 svg 中有效吗？
你能给我们你的样式组件的定义吗？请完整的一份。
颜色总是#939393，总是“假”。我会发布我的样式组件

标签： reactjs react-hooks styled-components

【解决方案1】：

问题出在我的图标上，就像他们说的那样。我必须创建一个 li 组件并为他传递我的道具，然后它才能工作。谢谢大家帮助我。

           ->index.js

<Item active={active}>
  <Icon.GoGraph size={20} />
  <p>Gestão de cobrança</p>
</Item>

          ->styles

export const Item = styled.li`
  width: 100%;
  height: 45px;
  display: flex;
  align-items: center;
  cursor: pointer;


  svg {
    transition: 0.3s ease;
    color: ${props => (props.active ? '#47B248' : '#939393')};
  }

【讨论】：