如何使用样式组件将道具传递给 .mapped 元素？答案

【问题标题】：How to pass props to .mapped elements with styled-components?如何使用样式组件将道具传递给 .mapped 元素？
【发布时间】：2020-09-22 21:36:23
【问题描述】：

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

所以每个 li 元素都是在一个样式化的 ul 组件中生成的。现在，查看样式化的组件列表，它看起来像：

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 而不是 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”或“真”，但我只是无法通过它。

如果你们中有人知道如何处理这个问题，我将非常感激。

【问题讨论】：

您使用样式组件错误...您需要制作一个不同的 const Li = styled.li<...> 然后访问那里的道具...
非常感谢，我对样式化的组件还很陌生，我已经厌倦了一切，但实际上将列表元素变成了一个组件……这是我这边的愚蠢错误。它现在工作:)

标签： javascript css reactjs styled-components

【解决方案1】：

这可能会对你有所帮助：

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

【讨论】：