Javascript 在 React 中使用渐变 API 自定义下划线

1. 为了生成随机梯度，你有两个数组colors和position，但对于linear-gradient，我们需要一个元组字符串.我创建了一个辅助函数generateGradientRangeArray来获取这个字符串.

2. 由于我们使用React，我们可以创建一个钩子(useGradient)来从外部获取数据并在这里进行转换.

3. 使用@emotion和Material UI组件，我们向Box和Typography添加了其他属性

4. 最后，我们创建Underline组件，判断渐变属性，并将props 传递给样式.

App.tsx

import styled from "@emotion/styled";
import Typography from "@mui/material/Typography";
import Box from "@mui/material/Box";

import { Underline } from "./Underline";
import useGradient from "./useGradient";

const Heading = styled(Typography)`
  font-family: "Playfair Display", serif;
  font-size: 10vw;
  @media screen and (min-width: 40em) {
    font-size: 6vw;
  }
`;
const Subheading = styled(Typography)`
  font-family: "Open Sans", sans-serif;
  font-size: 1em;
  @media screen and (min-width: 40em) {
    font-size: 1.75vw;
  }
`;

export default function App() {
  const gradient = useGradient();
  return (
    <div className="App">
      <Box>
        <Heading>
          Look At This <Underline gradient={gradient}>Pretty</Underline>{" "}
          Underline
        </Heading>
        <Subheading>
          Wow this one is super incredibly cool, and this{" "}
          <Underline gradient={gradient}>one is on Multiple Lines!</Underline> I
          wish I had found this like thirty projects ago when I was representing
          the lollipop guild.
        </Subheading>
      </Box>
    </div>
  );
}

useGradient.ts

import { useEffect, useState } from "react";
import { generateGradientRangeArray, randNumInRange } from "./Helpers";
import { GradientType, IResult } from "./types";

const GRADIENT_API =
  "https://gist.githubusercontent.com/wking-io/3e116c0e5675c8bcad8b5a6dc6ca5344/raw/4e783ce3ad0bcd98811c6531e40256b8feeb8fc8/gradient.json";

const useGradient = () => {
  const [gradients, setGradients] = useState<GradientType>();

  useEffect(() => {
    const getData = async (url: string): Promise<void> => {
      // get the data from the api
      const response = await fetch(url);
      const result = (await response.json()) as IResult;
      // Get single gradient from data pulled in array
      const gradient = result.data[randNumInRange(result.data.length)];
      const transform = generateGradientRangeArray(gradient);
      // set state with the result
      setGradients(transform);
    };
    // Catching errors
    getData(GRADIENT_API).catch(console.error);
  }, []);

  return gradients;
};

export default useGradient;

Underline.tsx

import styled from "@emotion/styled";
import { Props, GradientType } from "./types";

const UnderlineStyle = styled.span<{ gradient: GradientType }>`
  background-image: linear-gradient(
    ${(props) => props.gradient.direction},
    ${(props) => props.gradient.range}
  );
  background-repeat: no-repeat;
  background-size: 100% 0.2em;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;
  &:hover {
    background-size: 100% 88%;
  }
`;

export const Underline = ({ children, gradient }: Props) => {
  if (!gradient) return null;
  return <UnderlineStyle gradient={gradient}>{children}</UnderlineStyle>;
};

Helpers.ts

import { IGradient, GradientType } from "./types";
/// HELPER FUNCTIONS

// Get random number in range. Used to get random index from array.
export const randNumInRange = (max: number) =>
  Math.floor(Math.random() * (max - 1));

// Create range of colors for gradient
export const generateGradientRangeArray = (data: IGradient): GradientType => {
  const { colors, direction, name, positions } = data;
  const rangeColorsArray: string[] = [];

  for (const clr in colors) {
    for (const pos in positions) {
      if (clr === pos) {
        rangeColorsArray.push(`${colors[clr]} ${positions[pos]},`);
      }
    }
  }
  const createGradientString = rangeColorsArray.join(" ").slice(0, -1);

  return { name, direction, range: createGradientString };
};

types.ts

import { ReactNode } from "react";

export interface IGradient {
  name: string;
  direction: string;
  colors: string[];
  positions: string[];
}

export type GradientType = { range: string } & Pick<
  IGradient,
  "name" | "direction"
>;

export interface IResult {
  data: IGradient[];
}

export interface Props {
  children: ReactNode;
  gradient?: GradientType;
}