Задать вопрос
michael_mashush

Михаил

Ответы пользователя по тегу React

  • Почему при клике на навигацию не меняется id?

    michael_mashush
    @michael_mashush
    Я так понимаю Вам просто нужно подсвечивать активную ссылку? Можно написать так:

    const Navigation: React.FunctionComponent = () => {

  const routeList: RouteItem[] = [
    { name: 'Главная', path: '/' },
    { name: 'Оценки',  path: '/grade' }
  ]

  function getClassName({ isActive }: { isActive: boolean }): string {
    return `${styles.link} ${isActive ? styles.active : 0}`
  }

  return (
    <ul className={styles.list}>
      {
        routeList.map((route) => (
          <li key={route.path} className={styles.item}>
            <NavLink to={route.path} className={getClassName} data-scroll>
              {route.name}
            </NavLink>
          </li>
        ))
      }
    </ul>
  )

}


    Библиотека react-router-dom предоставляет компоненты Link и NavLink, где второй может принимать в качестве className функцию, которая принимает такие параметры как isActive, isPending и т.п.

    Так что состояние тут явно лишнее, как и обработка клика по элементам li)

    upd:

    Чтобы не заморачиваться с длинными именами классов - установите маленькую библиотеку classnames:

    function getClassName({ isActive }: { isActive: boolean }): string {
    return classNames(styles.link, {
      [styles.active]: isActive
    })
  }


    upd 2:

    Клик на элементе списка может некорректно обрабатываться из-за внутреннего устройства компонента Link, поэтому если Вам так необходимо использовать состояние categoryId, то событие клика нужно вешать на сам компонент Link. Но костылем это быть не перестанет)
    Ответ написан
    1 комментарий
    1 комментарий

  • По какой причине реакт не воспринимает массив?

    michael_mashush
    @michael_mashush
    Точно так и не понял в чем у Вас заключается проблема, но лично у меня данный код работает. Попробуйте его написать таким образом:

    import React from 'react'

export type CommentItem = {
  id: number
  comment: string
  createdComment: any
  // eslint ругается на тип "any"
  // лучше от него потом избавиться
}

export type CommentList = CommentItem[]

const Comment = () => {

  const [comments, setComments] = React.useState<CommentList>([])
 
  return (
    <div>
      {/* 
        для comment-объекта можно не устанавливать тип, поскольку 
        среда разработки поймёт что это объект массива с типом CommentList (то есть CommentItem)
      */}
      {comments.map((comment) => (
        <>
          <p>{comment.id}</p>
          <p>{comment.comment}</p>
          <p>{comment.createdComment}</p> 
        </>
      ))}
    </div>
  )

}

export default Comment


    У Вас точно импортирован хук useState?
    Ответ написан
    2 комментария
    2 комментария

  • Как правильно задать аргумент в компонент?

    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 комментарий
    1 комментарий