Местоположение
Россия, Санкт-Петербург и область, Колпино

Наибольший вклад в теги

Все теги (13)

Лучшие ответы пользователя

Все ответы (7)
  • Селекторы в CSS?

    michael_mashush
    @michael_mashush
    Дополню комментарий Максим:

    1. Для всех элементов li внутри ul.menu (любая вложенность):
    ul.menu li {
        // code
    }


    2. Для всех элементов li непосредственно внутри ul.menu (первый уровень вложенности):
    ul.menu > li {
        // code
    }


    Да и что подразумевается вообще под фразой? Порядок селекторов?:

    как правильно записать порядок

    Как-то неточно сформулировано)
    Ответ написан
    Комментировать
  • Как правильно задать аргумент в компонент?

    michael_mashush
    @michael_mashush
    1. Компонент Box, который принимает как props развернутый объект box:

    type Box = {
      name: string;
      date: string;
      image: string;
    };
    
    // можно сразу указать что props будет иметь тип Box, но я так не привык делать
    // всегда описываю тип Props для объекта props
    type Props = Box;
    
    export default function Box(props: Props) {
      const {name, date, image} = props;
    }


    И передавать в него данные нужно следующим образом:

    {data.map((box) => (
      <Box
        name={box.name}
        date={box.date}
        image={box.image}
      />
    ))}


    Или можно делать так, но это не везде принято делать, поскольку читаемость понижается (опять-таки все это условно, делай как считаешь нужным):

    {data.map((box) => (
      // поля объекта box сразу стали полями props
      // и про key не забудь внутри цикла map
      <Box key={?} {...box} />
    ))}


    2. Компонент Box, который принимает как props обычный объект, где box является вложенным объектом:

    type Box = {
      name: string;
      date: string;
      image: string;
    }
    
    type  Props = {
      box: Box;
    };
    
    export default function Box(props: Props) {
      const {name, date, image} = props.box;
    }


    и передавать его можно таким способом:

    {data.map((box) => (
      // объект box передается как props.box
      // и про key не забудь внутри цикла map
      <Box key={?} box={box} />
    ))}


    В большинстве случаев лучше использовать первый вариант, поскольку так легче использовать React.memo (если его, конечно, нужно использовать).
    Ответ написан
    1 комментарий
  • Как добавлять вложенности типов?

    michael_mashush
    @michael_mashush
    Судя по представленному коду я могу предположить что Вы вообще не разобрались в React с обычным JavaScript и решил использовать сразу его с TypeScript. JSX код действительно крайне странный, но даже если учитывать этот факт - не понимаю о какой вложенности типов идет речь)

    Если Вы действительно решили изучать React сразу с типизацией, то лучше вернуться к обычному JavaScript и хорошенько понять как работают компоненты, их состояния и пропсы, которые эти компоненты принимают - по прошлому Вашему вопросу было понятно что Вы с этим пока не очень хорошо разобрались.

    У React же имеется отличная обновленная документация, где сразу после небольшой теории ты можешь на практике последовательно сделать небольшую игру "Крестики-Нолики".

    Типы - это просто надстройка над обычным JavaScript, где ты описываешь то, с какими данными ты сейчас работаешь и что они содержат.

    В данном случае я попробую угадать что вы имели ввиду:

    type Slide = {
      img: string;
      alt: string;
    }
    
    type Slider = {
      data: Slide[]; // data - массив объектов типа Slide
    }
    Ответ написан
    1 комментарий