The tag <text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

huangapple
go评论180阅读模式
英文:

The tag <text> is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter

问题

  1. 警告：此浏览器不识别&lt;text&gt;标记。如果您想要渲染一个React组件，请以大写字母开头命名它。
  2.     at text
  3.     at O2 (http://localhost:5173/node_modules/.vite/deps/styled-components.js?v=b320d886:1423:6)
  4.     at TextView (http://localhost:5173/src/components/TextView/index.jsx?t=1678354528314:18:3)
  5.     at Header
  6.     at App
  7. printWarning	            @	react-dom.development.js:86
  8. error	                    @	react-dom.development.js:60
  9. createElement	            @	react-dom.development.js:9816
  10. createInstance	            @	react-dom.development.js:10941
  11. completeWork	            @	react-dom.development.js:22187
  12. completeUnitOfWork	        @	react-dom.development.js:26596
  13. performUnitOfWork	        @	react-dom.development.js:26568
  14. workLoopSync	            @	react-dom.development.js:26466
  15. renderRootSync	            @	react-dom.development.js:26434
  16. performConcurrentWorkOnRoot	@	react-dom.development.js:25738
  17. workLoop	                @	scheduler.development.js:266
  18. flushWork	                @	scheduler.development.js:239
  19. performWorkUntilDeadline	@	scheduler.development.js:533
  1. import styled from 'styled-components';
  2. // import variablesBreakpoints from '../../helpers/variablesBreakpoints';
  4. function TextView({ children, color, fontSize, fontWeight }) {
  5.   const StyledText = styled.text`
  6.     color: ${color};
  7.     font-size: ${fontSize};
  8.     font-weight: ${fontWeight};
  9.   `;
  11.   return <StyledText>{children}</StyledText>;
  12. }
  14. TextView.defaultProps = {
  15.   color: '#fff',
  16.   fontSize: '1em',
  17.   fontWeight: 'normal',
  18. };
  20. export default TextView;
  1.  1. 我没有转换为大写，因为它会自动完成。
  2.  2. 我做了一些研究，发现了一些相关的插件。
英文:

Problem

I just tried to build a component via styled components on vite. But, When I try to use text from styled components, It throws an error on console:

  1. Warning: The tag &lt;text&gt; is unrecognized in this browser. If you meant to render a React component, start its name with an uppercase letter.
  2.     at text
  3.     at O2 (http://localhost:5173/node_modules/.vite/deps/styled-components.js?v=b320d886:1423:6)
  4.     at TextView (http://localhost:5173/src/components/TextView/index.jsx?t=1678354528314:18:3)
  5.     at Header
  6.     at App
  7. printWarning	            @	react-dom.development.js:86
  8. error	                    @	react-dom.development.js:60
  9. createElement	            @	react-dom.development.js:9816
  10. createInstance	            @	react-dom.development.js:10941
  11. completeWork	            @	react-dom.development.js:22187
  12. completeUnitOfWork	        @	react-dom.development.js:26596
  13. performUnitOfWork	        @	react-dom.development.js:26568
  14. workLoopSync	            @	react-dom.development.js:26466
  15. renderRootSync	            @	react-dom.development.js:26434
  16. performConcurrentWorkOnRoot	@	react-dom.development.js:25738
  17. workLoop	                @	scheduler.development.js:266
  18. flushWork	                @	scheduler.development.js:239
  19. performWorkUntilDeadline	@	scheduler.development.js:533

Code

  1. import styled from &#39;styled-components&#39;;
  2. // import variablesBreakpoints from &#39;../../helpers/variablesBreakpoints&#39;;
  4. function TextView({ children, color, fontSize, fontWeight }) {
  5.   const StyledText = styled.text`
  6.     color: ${color};
  7.     font-size: ${fontSize};
  8.     font-weight: ${fontWeight};
  9.   `;
  11.   return &lt;StyledText&gt;{children}&lt;/StyledText&gt;;
  12. }
  14. TextView.defaultProps = {
  15.   color: &#39;#fff&#39;,
  16.   fontSize: &#39;1em&#39;,
  17.   fontWeight: &#39;normal&#39;,
  18. };
  20. export default TextView;

Note

  1. I didn't convert with uppercase because it does automatically.
  2. I done a research and I saw plugins about that.

答案1

得分: 1

styled.text 存在，但它应该仅在SVG上下文中使用。

如果您想在其他地方使用它，正如Undo在问题评论中建议的那样，可以使用&lt;p&gt;或&lt;span&gt;标签（分别使用styled.p或styled.span）。

英文:

While styled.text exists, it is supposed to be used only in SVG context.

If you want to use it somewhere else, as suggested by Undo in the question comment, use &lt;p&gt; or &lt;span&gt; tags instead (so respectively styled.p or styled.span).

huangapple
  • 本文由 发表于 2023年3月9日 17:49:42
  • 转载请务必保留本文链接：https://go.coder-hub.com/75682879.html
  • html
  • javascript
  • reactjs
  • styled-components
  • vite
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定