React Js 如何将 Border-botom 作为函数？

Question

我想给 Border-bottom 作为函数。我该怎么办？

这是 Border-bottom 应该出现的代码。

import React from "react";
import { Header } from "../BaseLabel";
import { Link, withRouter } from "react-router-dom";

const Header = ({ location: { pathname } }) => {
 const getStyle = (path) => {
    return {
      color: pathname === path ? "#191919" : "#B6B6B6",
      borderBottom: pathname === path ? "#191919" : null,
    };
  };
return (
    <>
   <ShapMenu>
       <ShapLinks to="/covid19" style={getStyle("/covid19")}> //Link
           <Header title="코로나19" current={pathname === "/covid19"} />
       </ShapLinks>
   </ShapMenu>
    </>
   );
}

这是HeaderStyled-components

const ShapMenu = styled.div`
  display: flex;
  box-sizing: content-box;
  overflow-x: scroll;
  overflow-y: hidden;
  white-space: nowrap;
  scroll-behavior: smooth;
  scrollbar-color: inherit;
  cursor: pointer;
`;
const ShapLinks = styled(Link)``;

这是一个可重用的组件代码。此代码不仅用于此屏幕，因为它是重复代码。

import PropTypes from "prop-types";
import styled from "styled-components";
import React from "react";

export const Header = ({ title, children }) => {
  return (
    <>
      <Title>{title}</Title>
      <Items>{children}</Items>
    </>
  );
};
Header.propTypes = {
  title: PropTypes.node,
  children: PropTypes.object,
};

const Items = styled.div``;
const Title = styled.div`
  margin-right: 14px;
  font-size: 20px;
`;

这就是我要给标题的风格属性。

border-bottom: 2px solid
      ${(props) => (props.current ? "#191919" : "transparent")};
    transition: border-bottom 0.5s ease-in-out;

Answer 1

CSS 风格的规则似乎是正确的。您应该将 current 属性从 Header 传递给 Title.

const Header = ({ current, title, children }) => { // <-- destructure current
  return (
    <>
      <Title current={current}>{title}</Title> // <-- pass current prop
      <Items>{children}</Items>
    </>
  );
};
Header.propTypes = {
  children: PropTypes.object,
  current: PropTypes.bool,
  title: PropTypes.node
};

const Title = styled.div`
  margin-right: 14px;
  font-size: 20px;

  border-bottom: 2px solid
    ${(props) => (props.current ? "#191919" : "transparent")}; // <-- use current prop
  transition: border-bottom 0.5s ease-in-out;
`;

React Js 如何将 Border-botom 作为函数？

How can React Js make a Border-botom as a function?

styles

border

reactjs

styled-components