Блог

Я бил головой об стену с этим, и я не могу понять, в чем здесь проблема. Я извлекаю некоторые данные из API. Это простой объект, который содержит имя пользователя, оценку и isOwner, что в основном является информацией, если имя пользователя равно текущему зарегистрированному пользователю. Теперь, если значение isOwner равно true, я хочу изменить стиль этой позиции li по-другому. Итак, допустим, так выглядит моя карта:

 const List = myData.map((el, i) => (
    <li key={el.name} isowner={el.isOwner ? 1 : 0}>
      {i   1}. {el.name}
      <span>{el.score}</span>
    </li>
  ));
  

Таким образом, каждый элемент li генерируется в стилизованном компоненте ul.
Теперь, глядя на список styled component, он выглядит так:

 export const ScoreList = styled.ul`
  width: 80%;
  display: flex;
  flex-direction: column;

  li {
    border: ${props =>
      props.isowner === 1 ? '2px solid yellow' : '1px solid black'};
    border-radius: 5px;
  }`
  

по какой-то причине он игнорирует значение isowner и отображает все с черной рамкой.

Теперь, глядя на инструменты разработчика Chrome, я заметил кое-что странное.

 <li isowner="1">...</li>
<li isowner="0">...</li>
<li isowner="0">...</li>
  

Я вижу, что «prop» помещается туда вот так, чего я не могу заметить в любом другом случае, когда я передаю props. Похоже, что логика работает хорошо, но она просто не видит элемент как реквизит.

Кроме того, я использую isowner вместо isOwner, потому что в противном случае я получаю следующее предупреждение:

 React does not recognize the `isOwner` prop on a DOM element. 
If you intentionally want it to appear in the DOM as a custom attribute, 
spell it as lowercase `isowner` instead. 
If you accidentally passed it from a parent component, remove it from the DOM element.
  

Я пробовал разные методы, вместо isOwner я сравнивал el.name с именем пользователя, которое я мог использовать из redux, результаты были теми же, я получил «1» или «true» именно там, где мне это было нужно, но я просто не смог передать его дальше.

Я был бы очень, очень благодарен, если у кого-нибудь из вас есть идея о том, как с этим справиться.

это может вам помочь:

 export const ScoreLi = styled.li`

border: ${props =>
  props.isowner === 1 ? '2px solid yellow' : '1px solid black'};
border-radius: 5px;`



const List = myData.map((el, i) => (
<ScoreLi key={el.name} isowner={el.isOwner ? 1 : 0}>
  {i   1}. {el.name}
  <span>{el.score}</span>
</ScoreLi>
));