访客计数器反应js的样式

Question

我想为我的网站创建访客计数器。我使用 api 来获取点击计数器。我想创建这样的东西

我尝试使用下面的代码，但结果是这样的

我想问我需要做什么才能使它像我想要的设计。我做错了什么代码？

这是我的代码：

  const Card = ( value:any) => {
  const result = `${value}`.split("");

  return (
    <div style={{ display: "flex" }}>
      {result.map((val) => (
        <div
          style={{
            fontSize: 42,
            marginRight: 10,
            background: "#8D0000",
            color: "white",
            width: 40,
            height: 55,
            fontWeight: "bold",
            textAlign: "center"
          }}
        >
          {val}
        </div>
      ))}
    </div>
  );
};

const Footer = () => {
  const [visitor, setvisitor] = useState<visitortype>();

  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
    .then(response => response.json())
    .then(allvisitor=>  setvisitor(allvisitor))
    .catch(error => console.log(error));
  }, []);

 return (
    <GridItem
      w="100%"
      h={{ base: "80px", lg: "300px" }}
      colSpan={{ base: 8, lg: 4 }}
    >
      <VStack
        align={{ base: "center", lg: "stretch" }}
        marginTop={{ base: "0", lg: "60px" }}
        marginLeft={{ base: "0", lg: "50px" }}
      >
       <Card value={visitor?.count}/>

      </VStack>
    </GridItem>
  );

};

Answer 1

由于您正在访问卡片组件中的道具，因此需要像这样修改结果变量：

const result = `${value.value}`.split("");

如果没有，那么您需要修改访问 props 的方式并使用对象解构，例如：

const Card = ({value}) => {}