小编Sim*_*ong的帖子

我已经MyStyledButton基于material-ui 编写了一个自定义按钮 ( ) Button。

import React from "react";
import { Button } from "@material-ui/core";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  root: {
    minWidth: 100
  }
});

function MyStyledButton(props) {
  const buttonStyle = useStyles(props);
  const { children, width, ...others } = props;

  return (

      <Button classes={{ root: buttonStyle.root }} {...others}>
        {children}
      </Button>
     );
}

export default MyStyledButton;

它使用主题进行样式设置，这指定backgroundColor为黄色阴影（特别是#fbb900）

import { createMuiTheme } from "@material-ui/core/styles";

export const myYellow = …

关于上一个问题 - Enzyme 如何检查组件可见性？我尝试使用jest-dom专门使用它们的toBeVisible功能。

尽管遵循了文档，但我无法让它在我的测试中工作并收到错误

"TypeError: expect(...).not.toBeVisible is not a function"

此处在 CodeSandbox 中完整复制

import Enzyme, { mount } from "enzyme";
import Adapter from "enzyme-adapter-react-16";
import React from "react";
import MyCheckbox from "./MyCheckbox";
import MyCheckboxesInUse from "./MyCheckboxesInUse";


Enzyme.configure({ adapter: new Adapter() });

test("Check that one checkbox is hidden and the other is visible", () => {
  const wrapper = mount(<MyCheckboxesInUse />);

  const checkboxes = wrapper.find(MyCheckbox);
  expect(checkboxes).toHaveLength(2);

  //HOW DO I CHECK THAT ONE IS VISIBLE AND …

我一直在编写一个自定义的 Material-UISelect下拉列表，它的顶部有一个可选的文本字段，允许用户在Select有很多条目的情况下搜索/过滤项目。

我正在努力解决如何Select在单击文本字段（呈现为 ）时保持打开状态并仅具有正常行为（选择常规时InputBase关闭。SelectMenuItem

CodeSandbox 在这里：https ://codesandbox.io/s/inspiring-newton-9qsyf

 const searchField: TextField = props.searchable ? (
    <InputBase
      className={styles.searchBar}
      onClick={(event: Event) => {
        event.stopPropagation();
        event.preventDefault();
      }}
      endAdornment={
        <InputAdornment position="end">
          <Search />
        </InputAdornment>
      }
    />
  ) : null;

  return (
    <FormControl>
      <Select
        className={styles.root}
        input={<InputBase onClick={(): void => setIconOpen(!iconOpen)} />}
        onBlur={(): void => setIconOpen(false)}
        IconComponent={iconOpen ? ExpandMore : ExpandLess}
        {...props}
      >
        {searchField}
        {dropdownElements.map(
          (currEntry: string): HTMLOptionElement => (
            <MenuItem key={currEntry} value={currEntry}>
              {currEntry}
            </MenuItem>
          ) …

我有一个简单的组件包裹着 Material UI 复选框。我在这里将其精简到最低限度。

//@flow
import React from "react";
import { Checkbox } from "@material-ui/core";

function MyCheckboxComponent() {
  const [checkedState, setCheckedState] = React.useState(true);

  const handleChange = event => {
    setCheckedState(event.target.checked);
  };

  return <Checkbox checked={checkedState} onChange={handleChange} />;
}

export default MyCheckboxComponent;

我只是想测试这个组件并切换复选框值并检查它。我无法通过我的简单测试。我不知道为什么。

import React from "react";

import Enzyme, { mount } from "enzyme";
import { Checkbox } from "@material-ui/core";
import Adapter from "enzyme-adapter-react-16";

import MyCheckboxComponent from "./MyCheckboxComponent";
Enzyme.configure({ adapter: new Adapter() });

/** Interaction tests testing user interaction with PilzButton */ …

我正在编写一个自定义 Material UI React 组件，我想将其Icon作为道具传递。但是，我想在获得图标时对其进行样式设置，并将其设置为最小宽度和高度。

这是我正在尝试做的事情的简化版本。我想将 应用于iconStyle传入的图标，props.statusImage但不知道如何。

import PropTypes from "prop-types";
import { makeStyles } from "@material-ui/styles";

const useStyles = makeStyles({
  iconStyle: {
    minWidth: 100,
    minHeight: 100
  }
});

function MyComponentWithIconProps(props) {
  const styles = useStyles();

  return <div>{props.statusImage}</div>;
}

MyComponentWithIconProps.propTypes = {
  statusImage: PropTypes.element
};

export default MyComponentWithIconProps;

我使用这样的组件

import {Done} from "@material-ui/icons";
<MyComponentWithIconProps statusImage={<Done/>}

代码沙盒：https : //codesandbox.io/s/jovial-fermi-dmb0p

我还尝试将提供Icon的Icon内容包装在另一个元素中并尝试对其进行样式设置。然而，这并没有奏效，而且似乎有点“hacky”。

我有一个使用流进行类型检查的 React 组件的 npm 包。

我的组件的用户可以访问我的流类型会很有用。但是目前我正在使用 Babel 编译我的代码，它会去除所有类型信息。

我的项目结构如下：

|
|- flowdecls
       myTypes.js
| -components
    - Component1
        Component1.js
| - lib
    - Component1.js (compiled using Babel)
    - Component1.js.flow (created using flow-copy-source)

例如，我的类型之一myTypes.js是

declare type DataItemIconType = {
    iconElement: React$Element<React$ElementType>,
    color?: string,
    hoverColor?: string
}

我会在Component1. 例如，道具之一Component1是

iconList : Array<DataItemIconType>

我已经发布了多个版本的 React 组件库作为没有 Flow 的 npm 包，并且我的组件被广泛使用。但是我真的很想提供流量支持。

在我最近的一次尝试中，我尝试使用本文中指定的flow-copy-source（使用 Flow 创作和发布 JavaScript 模块），但我的库的用户仍然无法访问我的类型。

我如何使诸如此类的类型DataItemIconType可供Component1在我的库中使用的人使用？

包.json

{
  "name": "@company/react-common-components-build-template", …

我正在使用 material-ui (v 4.9.5)Popper作为上面的“弹出”菜单。它anchorElement是ListItem在左侧选择的。我希望Popper与主菜单的顶部齐平。但是它看起来短了 5px。

如果我查看 Chrome Dev Tools，我会看到以下内容，参数中的5px值translate3d就是问题所在。如果我将值更改为0pxDev Tools 中的值，问题就解决了。

我的问题是如何通过代码实现这一点。我已经尝试了以下modifiers用于底层popper.js 的方法，但它什么也没做。

 <Popper
    modifiers={{
        offset: {
         enabled: true,
         offset: '-5, 0'
    },
    }}
    className={globalMenuStyle.popperStyle}
    placement="right-end"
    open={isPopoverOpen}
    onClose={handleHidingGlobalMenu}
    anchorEl={anchorElement}>
    {popoverMenuItems}
 </Popper>

更奇怪的是，如果我尝试这样的事情并尝试 x 轴，modifiers它会沿着 x 轴移动。为什么 x 轴有效而 y 轴无效？

modifiers={{
   offset: {
    enabled: true,
    offset: '0, 50'
},
}}

因此，我正在尝试编写一段简单的（据说是！）代码，在用户键入时过滤数组中的字符串。

这是我所做的缩减版本。

简要解释一下，我有两个相互交互的组件。

1. FilterExample 其中包含要过滤的字符串列表
2. MySearchBar它通过 prop 传递要过滤的字符串列表elementsToFilter。

当搜索文本发生变化时，MySearchBar它会计算哪些索引elementsToFilter仍应显示并通过FilterExample回调将它们传递回onFilterTextChanged

我无法解释为什么在无限循环中出现以下错误，以及useEffect的依赖数组之一（即currentFilterIndices和fruits）将如何在每次渲染时发生变化

Warning: Maximum update depth exceeded. This can happen when a component calls
setState inside useEffect, but useEffect either doesn't have a dependency array,
or one of the dependencies changes on every render.
    in FilterExample (at src/index.js:9)
    in StrictMode (at src/index.js:8)

import React, { useState, useEffect } from "react";
import MySearchBar from "./MySearchBar";

/** Basic example of …