小编Bis*_*_PL的帖子

创建 React 组件库时是否需要诸如 rollup 之类的捆绑器？\n即 如果我拥有的只是一个简单的项目，其中包含按钮/复选框等作为打字稿文件，然后在 npm 上发布，那么使用正确的配置运行 tsc 的 \xe2\x80\x99t 是否会将其全部转换为 dist 包？

那么rollup有什么好处呢？我读到树摇晃可能是这样，但是如果js文件位于它们自己的目录中，那么下面的\xe2\x80\x99t也导入单个组件吗？

Import { Button } from \xe2\x80\x98myLibrary/buttons\xe2\x80\x99\n

在使用 Material UI 中的选择时，我正在努力让它们正常工作，使用高度和宽度适当地使用“vh”和“vw”以及使用“vh”的文本大小。

我最终获得了合适的框大小，但由于显然使用“变换”从左上角偏移自身，因此标签文本不再居中。

无论如何，这就是我所拥有的：https : //codesandbox.io/s/material-demo-ujz2g

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import InputLabel from "@material-ui/core/InputLabel";
import MenuItem from "@material-ui/core/MenuItem";
import FormHelperText from "@material-ui/core/FormHelperText";
import FormControl from "@material-ui/core/FormControl";
import Select from "@material-ui/core/Select";

const useStyles = makeStyles(theme => ({
  formControl: {
    margin: theme.spacing(1),
    width: "20vw"
  },
  selectEmpty: {
    marginTop: theme.spacing(2)
  },
  select: {
    height: "10vh"
  },
  inputLabel: {
    fontSize: "4vh",
    alignSelf: "center"
  }
}));

export default function SimpleSelect() {
  const classes = useStyles();
  const …

尝试遵循官方页面上相当稀疏的教程并没有让我走得太远。

我本质上是试图根据 api 调用的参数添加某个标头，但我不知道如何配置端点来执行此操作。

在 webpack 配置中有这个：

  module: {
    rules: [
      {
        test: /\.svg$/,
        use: ['@svgr/webpack'],
      }
    ]
  },

和一个简单的导入组件

import Globe from './Globe.svg'

(...)
<div>
  <Globe />
</div>

导致整个页面呈现硬停止的以下错误。

Warning: <data:image/svg+xml;base64,ZnVuY3Rpb24gX2V... (more here)0.=87…
...BkZWZhdWx0IFN2Z0NvbXBvbmVudDs= /> is using incorrect casing. 
Use PascalCase for React components, or lowercase for HTML elements.

使用RTK Query，如何使用获取功能来更新另一个切片的状态？

本质上，我试图将所有相关状态保持在一起，因此在使用 查询数据后useLazyGetQuery，我想使用结果并将其存储在现有的切片状态中。

虽然像下面这样的东西可以在组件中工作，但它使整个代码变得混乱

  const [trigger, result, lastArg] = useLazyGetFiltersQuery();

  React.useEffect(() => {
    if (result.status === 'fulfilled' && result.isSuccess === true && result.isLoading === false) {
      dispatch(updateData(result.data.map((pg) => ({ label: pg, value: pg }))));
    }
  }, [dispatch, result, result.isLoading, result.isSuccess, result.status]);

我宁愿直接在createApi方法中设置一些逻辑，以便将结果数据从头存储在我想要的切片中。

谢谢

我想使用 DRF 创建一个简单的 Rest API ( https://www.django-rest-framework.org/ )。另一个服务将发出提供 JSON 的请求。这个 json 被解析，并且将发生一些相当简单的 pandas 数据帧操作。结果通过 JSON 发回。

有没有办法让这个过程成为多线程？尽管 pandas 操作相当简单，但它们仍然可能需要大约 0.5 秒到 1 秒，如果出于某种原因在同一时刻发出 3-4 个此类请求，我希望避免人们等待几秒钟。

谢谢！

有一个相当简单的功能组件，如果给出相同的道具，我想阻止它被重新渲染。下面是网上找的，貌似不行。知道我应该做什么吗？

就我而言， props 由一组对象组成。其中一些也是嵌套对象。这也许是一个线索？

export const DataTable = React.memo(renderedTable)

export default function renderedTable(props) {
    console.log(props) // logs exactly the same props twice
    ...
}

使用材料表（https://material-table.com/#/docs/features/component-overriding），我试图覆盖表的某个组件。它呈现得很好，但我想摆脱 intellij 向我抛出的 eslint 错误，而不仅仅是忽略/禁用它。

错误：

ESLint：组件定义缺少显示名称（反应/显示名称）

  ...
  return (
    <div className={classes.rootDiv}>
      <div className={classes.mainTableContainer}>
        <MainTable
          components={{
            Settings: (props) => <TableSettings name={'Steven'} {...props} /> // <- Error near (props)
          }}
          ...

表设置

import React from 'react';

const TableSettings = (props) => {

  return (
    <div>
      <h1>Test</h1>
    </div>
  );
};

export default TableSettings;

具有简单的react组件：

<Table>
  <TableBody>
    <TableCell>
      x
    </TableCell>
  </TableBody>
</Table>

如何有条件地将TableBody封装在另一个组件（例如Paper）中？我想到了类似下面的内容，但这似乎没有做到。

<Table>
  {paper && <Paper>}
  <TableBody>
    <TableCell>
      x
    </TableCell>
  </TableBody>
    {paper && </Paper>}
</Table>