Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/27.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 为什么我在React应用程序的HTML输出中看到传递的道具？_Javascript_Reactjs_Styled Components - Fatal编程技术网
Fatal编程技术网
  • javascript/
  • Javascript 为什么我在React应用程序的HTML输出中看到传递的道具？

Javascript 为什么我在React应用程序的HTML输出中看到传递的道具？

javascript reactjs

Javascript 为什么我在React应用程序的HTML输出中看到传递的道具？,javascript,reactjs,styled-components,Javascript,Reactjs,Styled Components,我有一个使用样式化组件创建的简单文本组件： const Text = styled.p` color: ${({color, theme}) => color ? theme.colors[color] : 'inherit'}; `; 它可以工作，但是由于某种原因，我可以看到控制台中HTML输出中传递的颜色属性 <p color="gray700" class="sc-ifAKCX GLYnD">2 active deals</p> 这取决于什么？一个多小

我有一个使用样式化组件创建的简单文本组件：

const Text = styled.p`
  color: ${({color, theme}) => color ? theme.colors[color] : 'inherit'};
`;
它可以工作，但是由于某种原因，我可以看到控制台中HTML输出中传递的
颜色
属性


<p color="gray700" class="sc-ifAKCX GLYnD">2 active deals</p>



这取决于什么？
一个多小时以来，我一直在试图找出原因


color
属性被传递到您的HTML，因为
color
是
HTML标记的属性，因此这是预期的行为

因此，我将避免使用
color
作为样式化组件的道具/React来避免传递不必要的HTML属性


如何在无状态功能组件中呈现？@MatthewBarbara，
…
。感谢您的努力！我有很多
direction
或
wrap
道具，我碰巧在这里和那里使用。它们应该根据你的答案来命名，因为它们在HTML输出中是可见的，与颜色属性相同

<p class="sc-ifAKCX GLYnD">2 active deals</p>