小编s.h*_*sam的帖子

我在 Visual Studio 代码编辑器中使用 Prettier 扩展已经很长时间了，但最近我正在用 Typescript 写 React。所以我需要配置 Prettier 来格式化 .tsx 文件。

我正在学习 reactjs - nodejs 我试图运行服务器，所以我安装了yarn、nodemon、express 但是当我尝试运行它时说错误命令失败，退出代码为 1。

我的错误是

    PS D:\react project\ReactManagement-tutorial> yarn dev
yarn run v1.13.0
warning package.json: No license field
$ concurrently --kill-others-on-fail "yarn server" "yarn client"
warning package.json: No license field
warning package.json: No license field
$ nodemon server.js
$ cd client && yarn start
warning ..\package.json: No license field
$ react-scripts start
[1] 'react-scripts'??(??) ???? ??? ??? ????, ???
??? ?? ??? ??????, ???
[1] ??? ?????? ?????.
info Visit https://yarnpkg.com/en/docs/cli/run for documentation about this command.
error …

我刚刚开始使用 React 查询，并使用它在 ListBooks 组件中使用 useQuery 从服务器获取书籍列表

const { data, error, isLoading, isError } = useQuery("books", getAllBooks);

如何访问任何其他组件中的图书列表？

我已经像这样设置了 QueryClientProvider ：

 const queryCache = new QueryCache({
  onError: (error) => {
    console.log(error);
  },
});

const queryClient = new QueryClient({ queryCache });

ReactDOM.render(
  <React.StrictMode>
    <QueryClientProvider client={queryClient}>
      <ThemeProvider theme={preset}>
        <BrowserRouter>
          <App />
        </BrowserRouter>
      </ThemeProvider>
      <ReactQueryDevtools initialIsOpen={false} />
    </QueryClientProvider>
  </React.StrictMode>,
  document.getElementById("root")
);

我正在寻找 Redux 中 useSelector 的等效项来访问 redux 存储中的数据。

我正在尝试创建自己的私有组件库。我设法使用 prop-types 显示 prop 的描述，但未显示预期值。我还没有看到任何有关此的文档，或者我只是盲目的。

这就是我想要实现的目标，就像在材质 UI 中一样。

我通过此命令使用react@17.0.2和创建了一个新的 React-typescript 应用程序typescript@4.5.2：

npx create-react-app my-app --template typescript

然后我决定像之前多次那样定义别名路径。我tsconfig.paths.json在我的应用程序的根目录中创建了 。

{
  "compilerOptions": {
    "baseUrl": "./src",
    "paths": {
      "components/*": ["/components/*"],
      "routes/*": ["/routes/*"],
      "constants/*": ["/constants/*"]
    }
  }
}

然后我将extend属性添加到文件中tsconfig.json：

{
  "extends": "./tsconfig.paths.json",
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src" …

前几天，我接受了一次采访，其中一个问题是“什么是吊装？” 然后我把吊装的概念讲得很透彻，然后面试官问我，吊装的主要优点是什么？我无法回答。javascript 中提升的主要优点到底是什么？

我有一个简单的反应代码。有一个材质-UI 文本字段。

当我点击文本框输入数据时，屏幕震动。输入数据后，我点击外面，盒子屏幕震动。请帮我解决这个屏幕抖动问题。非常感谢。

import Grid from '@material-ui/core/Grid';
import TextField from '@material-ui/core/TextField';
import PropTypes from 'prop-types';
import React, { useState } from 'react';
const Login = props => {

    return (
        <div>
            <Grid container spacing={2} justify="center">

                <Grid item xs={12} container justify="center" spacing={2}>
                    <Grid item xs={3}>
                        <TextField
                            label="fd"
                            variant="outlined"
                            fullWidth
                        >
                        </TextField>
                    </Grid>
                </Grid>
            </Grid>

        </div>
    )
}

export default Login;

当我单击包含 AnimatedMouse 组件的 div 时，在控制台中记录的事件是 AnimatedMouse 组件的元素之一，而不是 className“animated-mouse”本身的 div。

const AnimatedMouseScroll = () => {
    return (
        <div class="scroll-msg-container">
            <div class="scroll-msg-inner">
                <div class="scroll-msg-wheel">
                    click here
                </div>
            </div>
        </div>
    );
}

const EmployerService = () => {
    const scrollToNextSectionHandler = (event) => {
        console.log("clicked element", event.target)
    };

    return (
        <div className="animated-mouse" onClick={(e) => scrollToNextSectionHandler(e)}>
            <AnimatedMouseScroll />
        </div>
    );
}

ReactDOM.render(<EmployerService />, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.10.2/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.10.2/umd/react-dom.production.min.js"></script>

我对这两者之间的区别有点困惑。我的理解是这getDocuments是一种Future，似乎根据查询获取整个文档。snapshots另一方面，while是一种 Stream 类型，如果我错了，请纠正我，我认为它代表查询的结果？我需要对这个问题进行更具体的解释。我将包含一些代码片段作为示例以进行更多说明

获取文档()

getUserById(String userId) async {
    return await _firestore.collection("users").where("userId", isEqualTo: userId).getDocuments();
}

快照()

getUserById(String userId) async {
    return await _firestore.collection("users").where("userId", isEqualTo: userId).snapshots();
}

那么有什么区别呢？

I'm using MaterialTable from material-ui but there are two problems I'm having.

1. How do I make my columns equally spaced since, after the first two columns, there is a huge & unnecessary space to the 3rd column.

2. This particular table is not responsive, how do I make it responsive?

<MaterialTable
        title="All Surveys"
        columns={this.state.columns}
        data={this.state.data}
        options={{
          actionsColumnIndex: -1,
          exportButton: true,
          draggable: true,
        }}
        editable={{
          onRowAdd: (newData) => this.addNew(newData),
          onRowUpdate: (newData, oldData) => this.update(newData, oldData),
          onRowDelete: (oldData) => this.delete(oldData),
        }} …