Стиль для счетчика посетителей React.js

Я хочу создать счетчик посетителей для своего сайта. Я использую API для получения счетчика посещений. Я хочу создать что-то вроде этого

Я пытаюсь использовать код ниже, но результат такой

Я хочу спросить, что мне нужно сделать, чтобы дизайн стал таким, как я хочу. какой код я сделал неправильно?

function Card(props:any) {
  const count = `${props.number}`.split('');
 
  return (
    <div style = {{ display: "flex" }}>
      {count.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=>  console.info(allvisitor))
    .catch(error => console.info(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 number = {visitor?.count}/>

      </VStack>
    </GridItem>
  );
};

Я также пытаюсь использовать Reaction-Flip-Number, но мне все равно не нравится тот стиль, который мне нужен.

<FlipNumbers 
  height = {25} 
  width = {20}  
  color = "white" 
  background = "#8D0000"
  numberStyle = {{
    fontSize: 16,
  }}
  play perspective = {100} 
  numbers = {`${visitor?.count ?? 0}`}
/>;

Обычно это указывает на то, что val — это объект, а не строка. Запишите значение allvisitor в свой useEffect, чтобы убедиться, что у вас правильные данные.

— 30.04.2024 06:51

Не могли бы вы привести пример, где и как?

— 30.04.2024 06:56

Замените setvisitor(allvisitor) на console.info(allvisitor) в своем коде. Затем проверьте консоль браузера и пройдите вывод вашего вопроса.

— 30.04.2024 06:58

извините, как вставить вывод?

— 30.04.2024 07:27

Извините, я имел в виду вставить вывод в ваш вопрос

— 30.04.2024 07:28

это результат консоли { "count": 661, "click": 661 }

— 30.04.2024 07:28

Извините, я все еще не понимаю, что вы имеете в виду

— 30.04.2024 07:35

javascript reactjs typescript

30.04.2024 06:40

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Безумие обратных вызовов в javascript [JS]

Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

JavaScript Вопросы с множественным выбором и ответы

Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...

167

Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Поскольку вы получаете доступ к реквизитам в компоненте карты, вам необходимо изменить переменную результата следующим образом:

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

Если нет, то вам нужно изменить способ доступа к реквизитам и использовать деструктуризацию объектов, например:

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

я меняю его, но результат становится неопределенным

— 30.04.2024 08:20

Я думаю, согласно журналу, должно быть value.count или value.click.

— 02.05.2024 10:04

все еще не работает

— 02.05.2024 13:52

30.04.2024 07:41

Ответ принят как подходящий

Рефлексия на ваш вопрос

Я считаю, что ошибка связана с непониманием того, как работает передача параметров компонента. Вы думали, что достаточно просто объявить параметр, передаваемый компоненту. Это не. Компонент получает объект, содержащий все переданные свойства, включая в вашем случае свойство с именем «значение». Итак, если вы продолжите в том же духе, вам будет немного неловко получать доступ к параметру value из объекта с помощью value.value.

<Card value = {577} />

// Now "value" is a object, what stored a properties (as "value = {577}" attribute)
const Card = (value) => {
  // Now can get "value" attribute from "value" object - not readable
  console.info(value.value) // 577
}

Решение

В React.js компоненты получают переданные переменные как объект. Вы можете либо объявить объект напрямую (например, как props) и позже ссылаться на его параметры, либо объявить параметры напрямую, как показано во втором примере.

<Card number = {577} anotherProp = {true} />

function Card(props) {
  // Can use properties as parameter of props object
  console.info(props.number) // 577
  console.info(props.anotherProp) // true
}

// or

function Card({ number, anotherProp }) {
  // Can use properties when directly declared them in function
  // That's called "Destructuring assignment"
  console.info(number) // 577
  console.info(anotherProp) // true
}

Больше информации

Задание на деструктуризацию - MDN Docs
реквизиты внутри дочернего компонента - React.js Docs

Пример

// Import the React and ReactDOM modules
const { useState, useEffect } = React;

// The component receives the passed values as object (props)
function Card(props) {
  const digits = `${props.number}`.split('');
 
  return (
    <div style = {{ display: "flex" }}>
      {digits.map((val) => (
        <div
          style = {{
            fontSize: 42,
            marginRight: 10,
            background: "#8D0000",
            color: "white",
            width: 40,
            height: 55,
            fontWeight: "bold",
            textAlign: "center"
          }}
        >
          {val}
        </div>
      ))}
    </div>
  );
}

// Instead of declaring the object (props), you can directly declare the parameters within { and }
// That's called "Destructuring assignment"
function AnotherCard({ number }) {
  const digits = `${number}`.split('');
 
  return (
    <div style = {{ display: "flex" }}>
      {digits.map((val) => (
        <div
          style = {{
            fontSize: 42,
            marginRight: 10,
            background: "#8D0000",
            color: "white",
            width: 40,
            height: 55,
            fontWeight: "bold",
            textAlign: "center"
          }}
        >
          {val}
        </div>
      ))}
    </div>
  );
}

// App component
function App() {
  return (
    <div style = {{ display: "grid", gap: "10px" }}>
      Example #1 (Card component with props object)
      <Card number = {577} />
      
      Example #2 (AnotherCard component with destructuring assignment)
      <AnotherCard number = {688} />
    </div>
  );
}

// Render the application to the DOM
ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>

<div id = "root"></div>

Пример с API

// Import the React and ReactDOM modules
const { useState, useEffect } = React;

// The component receives the passed values as object (props)
function Card(props) {
  const digits = `${props.number}`.split('');
 
  return (
    <div style = {{ display: "flex" }}>
      {digits.map((val) => (
        <div
          style = {{
            fontSize: 42,
            marginRight: 10,
            background: "#8D0000",
            color: "white",
            width: 40,
            height: 55,
            fontWeight: "bold",
            textAlign: "center"
          }}
        >
          {val}
        </div>
      ))}
    </div>
  );
}

// Instead of declaring the object (props), you can directly declare the parameters within { and }
// That's called "Destructuring assignment"
function AnotherCard({ number }) {
  const digits = `${number}`.split('');
 
  return (
    <div style = {{ display: "flex" }}>
      {digits.map((val) => (
        <div
          style = {{
            fontSize: 42,
            marginRight: 10,
            background: "#8D0000",
            color: "white",
            width: 40,
            height: 55,
            fontWeight: "bold",
            textAlign: "center"
          }}
        >
          {val}
        </div>
      ))}
    </div>
  );
}

// App component
function App() {
  // Declare visitor with default object
  const [visitor, setVisitor] = useState({
    count: 0,
    click: 0
  });

  // Request data of visitor
  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
      .then(response => response.json())
      .then(v =>  setVisitor(v));
  }, []);
  
  // Will see that the code runs first, and the fetch will update the visitor value asynchronously
  console.info(visitor)

  return (
    <div style = {{ display: "grid", gap: "10px" }}>
      Example #1 (Card component with props object)
      <Card number = {visitor.count} />
      
      Example #2 (AnotherCard component with destructuring assignment)
      <AnotherCard number = {visitor.count} />
    </div>
  );
}

// Render the application to the DOM
ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>

<div id = "root"></div>

Пример с API и дополнительными нулевыми цифрами

// Import the React and ReactDOM modules
const { useState, useEffect } = React;

// How many digits in total do we want to display
const DIGIT_COUNT = 5

// The component receives the passed values as object (props)
function Card(props) {
  let digits = `${props.number}`.split('');
  // Determine the number of digits
  const numDigits = digits.length;
  // If the number has less than DIGIT_COUNT digits, add leading zeros
  if (numDigits < DIGIT_COUNT) {
    digits = Array(DIGIT_COUNT - numDigits).fill(0).concat(digits);
  }

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

// Instead of declaring the object (props), you can directly declare the parameters within { and }
// That's called "Destructuring assignment"
function AnotherCard({ number }) {
  let digits = `${number}`.split('');
  // Determine the number of digits
  const numDigits = digits.length;
  // If the number has less than DIGIT_COUNT digits, add leading zeros
  if (numDigits < DIGIT_COUNT) {
    digits = Array(DIGIT_COUNT - numDigits).fill(0).concat(digits);
  }

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

// App component
function App() {
  // Declare visitor with default object
  const [visitor, setVisitor] = useState({
    count: 0,
    click: 0
  });

  // Request data of visitor
  useEffect(() => {
    fetch('https://count.cab/hit/ghG6Oirn0b')
      .then(response => response.json())
      .then(v =>  setVisitor(v));
  }, []);

  return (
    <div style = {{ display: "grid", gap: "10px" }}>
      Example #1 (Card component with props object)
      <Card number = {visitor.count} />
      
      Example #2 (AnotherCard component with destructuring assignment)
      <AnotherCard number = {visitor.count} />
    </div>
  );
}

// Render the application to the DOM
ReactDOM.render(<App />, document.getElementById("root"));

<script src = "https://cdn.jsdelivr.net/npm/react/umd/react.production.min.js"></script>
<script src = "https://cdn.jsdelivr.net/npm/react-dom/umd/react-dom.production.min.js"></script>

<div id = "root"></div>

Работает ли это, если данные из API?

— 03.05.2024 02:34

Происхождение данных не имеет значения. Просто способ передать его компоненту.

— 03.05.2024 08:00

я обновляю свой код выше, но результат все еще не определен, я что-то пропустил?

— 03.05.2024 09:09

@ Estherak23 Эстерак23 Ах, я вижу, что предоставленная ссылка на API работает. Нам не нравятся внешние источники в SO, потому что, если они исчезнут, примеры больше не будут работать. Но в конце своего ответа я вставлю код, который работает только с вашим API.

— 03.05.2024 09:55

@Estherak23 дополнен двумя примерами (первый: просто получите номер по API, второй: добавьте дополнительные нули)

— 03.05.2024 10:12

02.05.2024 19:21