React 项目没有按我的意图显示文本

Question

我正在使用 Material UI TextInput 组件和一个传递文本的占位符道具 "Contraseña";单词中的字母 ñ 未按预期呈现，而是呈现为 \fx1。 HTLM header 有元 UTF-8，我使用 parcel 2.0.0-rc.0 作为我的打包器

index.html

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="theme-color" content="#000000" />
    <meta
      name="APP"
      content="web site created using react"
    />
    <script src="~/src/index.js" type="module"></script>
    <title>App</title>
  </head>
  <body>
    <div id="root"></div>
  </body>
</html>

index.js

import React, { StrictMode } from "react";
import ReactDOM from "react-dom";
import TextField from "@material-ui/core/TextField";

const rootElement = document.getElementById("root");

ReactDOM.render(
  <StrictMode>
    <TextField color="secondary" margin="none" placeholder="Contraseña" />
  </StrictMode>,
  rootElement
);

Answer 1

问题似乎与 Parcel 2 RC (Bug report) 的使用有关。重要的是要注意错误的编码只发生在属性值中；一个临时解决方案是将字符串属性值放在方括号中：

<TextField color="secondary" margin="none" placeholder={"Contraseña"} />

React 项目没有按我的意图显示文本

React project is not displaying text as I intend

html

bundler

reactjs

material-ui

parceljs