为什么我在 React 应用程序的 HTML 输出中看到传递的道具？
Why do I see passed props in HTML output in a React app?
我有一个使用样式化组件创建的简单文本组件：
const Text = styled.p`
color: ${({color, theme}) => color ? theme.colors[color] : 'inherit'};
`;
它有效，但是由于某种原因，我可以看到 color 道具在控制台的 HTML 输出中传递。
<p color="gray700" class="sc-ifAKCX GLYnD">2 active deals</p>
奇怪的是，如果我将道具从 color 重命名为 variant，它不会出现在控制台中：
<p class="sc-ifAKCX GLYnD">2 active deals</p>
这取决于什么？
我想了一个多小时，终于找到了原因。
color 属性被传递给您的 HTML 因为 color 是 <font> HTML 标签的一个属性，因此这是预期行为。
因此我会避免使用 color 作为 styled-components/React 的道具，以避免传递不必要的 HTML 属性
我有一个使用样式化组件创建的简单文本组件：
const Text = styled.p`
color: ${({color, theme}) => color ? theme.colors[color] : 'inherit'};
`;
它有效，但是由于某种原因，我可以看到 color 道具在控制台的 HTML 输出中传递。
<p color="gray700" class="sc-ifAKCX GLYnD">2 active deals</p>
奇怪的是，如果我将道具从 color 重命名为 variant，它不会出现在控制台中：
<p class="sc-ifAKCX GLYnD">2 active deals</p>
这取决于什么？
我想了一个多小时，终于找到了原因。
color 属性被传递给您的 HTML 因为 color 是 <font> HTML 标签的一个属性，因此这是预期行为。
因此我会避免使用 color 作为 styled-components/React 的道具，以避免传递不必要的 HTML 属性