小编Nic*_*via的帖子

我创建了一个空白的 React 项目，使用命令：npx create-react-appon npm v7.0.7 和 Node v15.0.1

安装：

• 反应 v17.0.1,
• 节点sass v5.0.0，

然后我尝试将空白的 .scss 文件导入 App 组件：

应用程序.js

import './App.scss'

function App() {
  return (
    <div className="App">
      App
    </div>
  );
}

export default App;

抛出错误：

Failed to compile.

./src/App.scss (./node_modules/css-loader/dist/cjs.js??ref--5-oneOf-6-1!./node_modules/postcss-loader/src??postcss!./node_modules/resolve-url-loader??ref--5-oneOf-6-3!./node_modules/s
ass-loader/dist/cjs.js??ref--5-oneOf-6-4!./src/App.scss)
Error: Node Sass version 5.0.0 is incompatible with ^4.0.0.

包.json

{
  "name": "react-17-node-sass-5",
  "version": "0.1.0",
  "private": true,
  "dependencies": {
    "@testing-library/jest-dom": "^5.11.5",
    "@testing-library/react": "^11.1.0",
    "@testing-library/user-event": "^12.1.10",
    "node-sass": "^5.0.0",
    "react": "^17.0.1",
    "react-dom": "^17.0.1",
    "react-scripts": "4.0.0",
    "web-vitals": "^0.2.4" …

收到此警告：（Warning: React does not recognize the 'textColor' prop on a DOM element其他一切正常）。

以这种方式在我的组件中使用它：

import { ImageWithFallback, Paper, Tabs, Tab, Typography, Tooltip,} from '@material-ui-core/dist';

<Paper square className={classes.root} data-test-id={testMediaEditRenditionTabPanel.paper}>
      <Tabs
        value={tabState}
        variant="scrollable"
        onChange={handleChange}
        orientation="vertical"
        indicatorColor="primary"
        centered
        textColor="primary"
        className={classes.tabs}
      >
      </Tabs>
</Paper>

提前致谢。

我是 React 的新手，当我单击View按钮时，我很难弄清楚如何返回一个新页面（一个组件）。我有一个用户表，每行都有一个查看按钮。我只能在完全相同的页面中检索数据，但我想在另一个页面中检索我的视图详细信息，其 url 上的 id，例如：http://user-details-1。有人可以帮我弄这个吗。谢谢！

这是我的视图代码/组件：

import React, { useState, useEffect } from "react";
import Form from "react-bootstrap/Form";

const ViewUserDetaiils = (props) => {
  const [user, setUser] = useState(props.currentUser);

  useEffect(() => {
    setUser(props.currentUser);
  }, [props]);

  return (
    <Form>
      <div>
        <div>
          <strong>Id:</strong> {user.id}{" "}
        </div>
        <div>
          <strong>Name:</strong> {user.name}{" "}
        </div>
        <div>
          <strong>Contact:</strong> {user.contact}{" "}
        </div>
        <div>
          <strong>Email:</strong> {user.email}{" "}
        </div>
      </div>
    </Form>
  );
};

export default ViewUserDetails;

这是我的路由：

import React, { Component } from "react";
import …