javascript - 将内联样式更改为样式组件

Question

我有这个代码:

import React, {useState} from 'react';
import PropTypes from 'prop-types';
import styled from "styled-components";
import ArrowTemplate from "./ArrowTemplate";

const AccordionBtn = styled.button`
    background-color: #eee;
    color: #444;
    cursor: pointer;
    padding: 18px;
    display: flex;
    align-items: center;
    border: none;
    outline: none;
    transition: background-color 0.6s ease;
    :hover,
    :focus,
    :active {
      background-color: #ccc;
    }
`;

const AccordionTitle = styled.p`
    font-family: "Open Sans", sans-serif;
    font-weight: 600;
    font-size: 14px;
`;

const AccordionContent = styled.div`
    background-color: red;
    overflow: hidden;
    transition: 0.6s;
`;

const AccordionText = styled.div`
    font-family: "Open Sans", sans-serif;
    font-weight: 400;
    font-size: 14px;
    padding: 18px;
`;

const AccordionSection = styled.div`
    display: flex;
    flex-direction: column;
`;

Accordion.propTypes = {
    title: PropTypes.string.isRequired,
    content: PropTypes.node.isRequired,
    id: PropTypes.string.isRequired,
};

function Accordion(props) {
    const [isAccordionExpanded, setIsAccordionExpanded] = useState(false);
    const toggleAccordion = () => {
        setIsAccordionExpanded(!isAccordionExpanded);
    };
    return (
        <AccordionSection>
            <AccordionBtn onClick={toggleAccordion}>
                <AccordionTitle>
                    {props.title}
                </AccordionTitle>
                <ArrowTemplate
                    color={'black'}
                    direction={isAccordionExpanded === true ? 'up' : 'down'}
                    onClick={toggleAccordion}
                />
            </AccordionBtn>
            <AccordionContent
                style={{height: isAccordionExpanded === true ? "100px" : "0"}}
                >
                <AccordionText>
                    {props.content}
                </AccordionText>
            </AccordionContent>
        </AccordionSection>
    );
}

export default Accordion;

此代码的作用是在单击时扩展 Accordion 。很简单。但是现在，我想移动这个高度:

<AccordionContent
    style={{height: isAccordionExpanded === true ? "100px" : "0"}}
>

这里:

const AccordionContent = styled.div`
        background-color: red;
        overflow: hidden;
        transition: 0.6s;
    `;

问题是我需要使用状态，如果我在函数中声明它，它会被重新渲染，而不是运行动画。如何将状态传递给样式化组件？

Answer 1

您可以直接将 isAccordionExpanded 传递给样式组件。改变你的风格:

const AccordionContent = styled.div`
    background-color: red;
    overflow: hidden;
    transition: 0.6s;
`;

包括这个

height: ${({ isAccordionExpanded }) => (isAccordionExpanded ? "100px" : "0"};

在 React 中制作动画的另一种方法是使用 React Transition Group , 不错