样式组件获取 Expecting Unicode 转义序列 \uXXXX

Question

我正在学习这个 .net 教程 https://docs.microsoft.com/en-us/learn/modules/build-web-api-minimal-spa/3-exercise-create-front-end

我已经遵循了这些步骤，甚至 copy/pasted 他们的代码 Main.js:

import React, { useState } from "react";
import styled from "styled-components";

const PizzaFrame = styled.div\`
    border: solid 1px gray;
    padding: 10px;
    margin: 15px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
    font-family: Arial;
`;

const Input = styled.input\`
    border: solid 1px black;
    padding: 5px;
    border-radius: 3px;
`;

const Title = styled(Input)\`
    text-transform: uppercase;
`;

const Save = styled.button\`
   width: 100px;
   margin: 10px;
   background: green;
   color: white;
   font-size: 16px;
   padding: 10px;
   border-radius: 5px;
`;

let pizzas = [{
id: 1, name: 'Cheese pizza', description: 'very cheesy'
},
{
id: 2, name: 'Al Tono pizza', description: 'lots of tuna'
}];

const Pizza = ({ pizza }) => {
   const [data, setData] = useState(pizza);
   const [dirty, setDirty] = useState(false);

   function update(value, fieldName, obj) {
   setData({ ...obj, [fieldName] : value });
   setDirty(true);
   }

   function onSave() {
   setDirty(false);
   // make REST call
   }

   return (<React.Fragment>
     <PizzaFrame>
     <h3>
       <Title onChange={(evt) => update(evt.target.value, 'name', data)} value={data.name} /> 
     </h3>
     <div>
       <Input onChange={(evt) => update(evt.target.value, 'description', data)} value={data.description} />
     </div>
     {dirty ? 
      <div><Save onClick={onSave}>Save</Save></div> : null
     }
     </PizzaFrame>
     </React.Fragment>)
}

const Main = () => {
    const data = pizzas.map(pizza => <Pizza pizza={pizza} />)

    return (<React.Fragment>
     {data}
     </React.Fragment>)
    }

export default Main;

在我的 VS Code 中，对于以“`”开头的所有内容，我都收到错误 Invalid character.ts(1127)：

const PizzaFrame = styled.div\`
    border: solid 1px gray;
    padding: 10px;
    margin: 15px 10px;
    border-radius: 5px;
    box-shadow: 0 0 5px grey;
    font-family: Arial;
`;

const Input = styled.input\`
    border: solid 1px black;
    padding: 5px;
    border-radius: 3px;
`;

const Title = styled(Input)\`
    text-transform: uppercase;
`;

const Save = styled.button\`
   width: 100px;
   margin: 10px;
   background: green;
   color: white;
   font-size: 16px;
   padding: 10px;
   border-radius: 5px;
`;

它不会编译：

Failed to compile.

SyntaxError: C:\..\net_react\pizza-web\src\Main.js: Expecting Unicode escape sequence \uXXXX. (4:30)
  2 | import styled from "styled-components";
  3 |
> 4 | const PizzaFrame = styled.div\`

我在运行或 yarn add styled-components:

时也会收到警告

warning Pattern ["styled-components@^5.3.5"] is trying to unpack in the same destination "C:\Users\...\AppData\Local\Yarn\Cache\v6\npm-styled-components-5.3.5-a750a398d01f1ca73af16a241dec3da6deae5ec4-integrity\node_modules\styled-components" as pattern ["styled-components@^5"]. This could result in non-deterministic behavior, skipping.
[3/4] Linking dependencies...
warning " > @testing-library/user-event@13.5.0" has unmet peer dependency "@testing-library/dom@>=7.21.4".
warning "react-scripts > tailwindcss@3.0.23" has unmet peer dependency "autoprefixer@^10.0.2".        
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-syntax-flow@^7.14.5".
warning "react-scripts > eslint-config-react-app > eslint-plugin-flowtype@8.0.3" has unmet peer dependency "@babel/plugin-transform-react-jsx@^7.14.9".
warning "react-scripts > react-dev-utils > fork-ts-checker-webpack-plugin@6.5.0" has unmet peer depend

我将这个“styled-components”添加到我的 package.json:

{
  "name": "pizza-web",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.16.3",
    "@testing-library/react": "^12.1.4",
    "@testing-library/user-event": "^13.5.0",
    "react": "^18.0.0",
    "react-dom": "^18.0.0",
    "react-scripts": "5.0.0",
    "styled-components": "^5.3.5",
    "web-vitals": "^2.1.4"
  },
  "scripts": {
    "start": "react-scripts start",
    "build": "react-scripts build",
    "test": "react-scripts test",
    "eject": "react-scripts eject"
  },
  "eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },
  "browserslist": {
    "production": [
      ">0.2%",
      "not dead",
      "not op_mini all"
    ],
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ]
  },
  "resolutions": {
    "styled-components": "^5"
  }
}

不知道是不是“styled-components”没有安装好？

Answer 1

我不知道他们为什么要转义第一个反引号，但这是错误的，这就是你使用的方式 styled-components:

const PizzaFrame = styled.div`
border: solid 1px gray;
padding: 10px;
margin: 15px 10px;
border-radius: 5px;
box-shadow: 0 0 5px grey;
font-family: Arial;
`;

styled-components 是基于一个叫做 Tagged Template Literals 的 JS 特性，它允许你用反引号``而不是 () 调用一个函数，所以 styled.div 只是一个常见的 JS 函数：MDN

如果您不确定是否已正确安装 styled-components 软件包，请执行以下操作：

yarn remove styled-components

和

yarn add styled-components

样式组件获取 Expecting Unicode 转义序列 \uXXXX

Styled-components getting Expecting Unicode escape sequence \uXXXX

c#

reactjs

.net

yarnpkg