基于布尔值 React 条件渲染 HTML 个元素

Question

构建一个采用值 (attribute.readonly) 的组件，并且只显示前 40 个字符，除非 <Chevron onClick 被触发，这意味着我想将 fullDescription 显示为与 shortHeading 相反 - 理想情况下，这将呈现类似于目前仅将 Accordion 的高度加倍的方式，以允许其余内容适合。我知道我还有点偏离，但我将不胜感激为我的后续步骤/改进我已有的东西提供一些建议！

// @flow
import styled from "styled-components";
import chevron from "../Assets/chevron-icon.svg";

type Props = { attribute: AttributeType, className?: string };

const Accordion = styled.div`
  background-color: #e5e9eb;
  height: 56px;
  width: 612px;
  border-radius: 2px;
  border: 1px solid #27282a;
  margin-bottom: 48px;
  display: flex;
  align-items: center;

  span {
    padding-left: 24px;
  }
`;

const Chevron = styled.img`
height: 40px;
width: 40px;
float: right;
margin-right: 12px;
`;

const ExpandableString = ({ attribute, className }: Props) => {

  const fullDescription = attribute.readonlyvalue;
  const shortHeading = fullDescription.substring(0, 40) + '...';
  const isExpanded = false;

  function toggleContent() {
    isExpanded = true;
  }

  return (
    <Accordion className={className}> 
      <span>{shortHeading}</span>
      <Chevron onClick={toggleContent} src={chevron} alt="Expand or collapse content" />
    </Accordion>
  );
};

export default ExpandableString;

Answer 1

将您的数据放入状态并切换它

const ExpandableString = ({ attribute, className }: Props) => {
  const [isExpanded, setIsExpanded] = React.useState(false);

  function toggleContent() {
    setIsExpanded(prev => !prev);
  }

  return (
    <Accordion className={className}> 
      <span>{shortHeading}</span>
      <Chevron onClick={toggleContent} src={chevron} alt="Expand or collapse content" />
    </Accordion>
  );
};

然后，根据 isExpanded 状态，您可以有条件地渲染您的 React 组件。

基于布尔值 React 条件渲染 HTML 个元素

Conditional rendering of HTML elements based on boolean value React

html

css

onclick

reactjs

styled-components