Javascript 如何将道具传递给带有样式化组件的.mapped元素？

我的头撞到了墙上，我不太明白这里有什么问题。 我正在从API中提取一些数据。它是一个简单的对象，包含username、score和isOwner，如果username等于当前登录的用户，则基本上就是这些信息。现在，如果isOwner是真的，我想改变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>
  ));

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>

我尝试了不同的方法，而不是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>
));

export const ScoreLi=styled.li`
边框：${props=>
props.isowner==1？'2px纯黄色'：'1px纯黑色'}；
边界半径：5px`
const List=myData.map（（el，i）=>(
{i+1}.{el.name}
{el.score}
));

您使用的样式化组件错误。。。你需要制作一个不同的const Li=

styled.Li

，然后访问那里的道具…非常感谢，我对styled组件相当陌生，我已经厌倦了一切，但实际上把list元素变成了一个组件。。。我犯了一个愚蠢的错误。现在可以工作了：）

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>
));