标签<text>在此浏览器中无法识别。如果你打算渲染一个 React 组件，它的名字以大写字母开头

Question

问题

我刚刚尝试通过 vite 上的样式化组件构建组件。但是，当我尝试使用样式组件中的文本时，它会在控制台上引发错误：

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

代码

import styled from 'styled-components';
// import variablesBreakpoints from '../../helpers/variablesBreakpoints';

function TextView({ children, color, fontSize, fontWeight }) {
  const StyledText = styled.text`
    color: ${color};
    font-size: ${fontSize};
    font-weight: ${fontWeight};
  `;

  return <StyledText>{children}</StyledText>;
}

TextView.defaultProps = {
  color: '#fff',
  fontSize: '1em',
  fontWeight: 'normal',
};

export default TextView;

注意

1. 我没有用大写字母转换，因为它会自动转换。
2. 我做了一个研究，我看到了关于那个的插件。

Answer 1

虽然

styled.text

存在，但它应该只用于SVG上下文。

如果您想在其他地方使用它，正如问题评论中撤消所建议的那样，请改用

<p>

或

<span>

标签（分别为

styled.p

或

styled.span

）。