reactjs - 如何从控制台删除警告？

Question

使用了 redux、react 和 material-ui lib我有使用react 和redux 的react 组件。从 redux 收到的状态，所以，该组件:

import React from "react";
import {withStyles} from "material-ui/styles";
import {MenuItem} from "material-ui/Menu";
import Chip from "material-ui/Chip";
import CancelIcon from "@material-ui/icons/Cancel";
import Input from "material-ui/Input";
import Select from "react-select";
import Typography from "material-ui/Typography";

const ITEM_HEIGHT = 48;

const styles = theme => ({
  // Autocomplete styles
  "@global": {
    ".Select-control": {
      display: "flex",
      alignItems: "center",
      border: 0,
      height: "auto",
      background: "transparent",
      "&:hover": {
        boxShadow: "none",
      },
    },
    ".Select-multi-value-wrapper": {
      flexGrow: 1,
      display: "flex",
      flexWrap: "wrap",
    },
    ".Select--multi .Select-input": {
      margin: 0,
    },
    ".Select.has-value.is-clearable.Select--single > .Select-control .Select-value": {
      padding: 0,
    },
    ".Select-noresults": {
      padding: theme.spacing.unit * 2,
    },
    ".Select-input": {
      display: "inline-flex !important",
      padding: 0,
      height: "auto",
    },
    ".Select-input input": {
      background: "transparent",
      border: 0,
      padding: 0,
      cursor: "default",
      display: "inline-block",
      fontFamily: "inherit",
      fontSize: "inherit",
      margin: 0,
      outline: 0,
    },
    ".Select-placeholder, .Select--single .Select-value": {
      position: "absolute",
      top: 0,
      left: 0,
      right: 0,
      bottom: 0,
      display: "flex",
      alignItems: "center",
      fontFamily: theme.typography.fontFamily,
      fontSize: theme.typography.pxToRem(16),
      padding: 0,
    },
    ".Select-placeholder": {
      opacity: 0.42,
      color: theme.palette.common.black,
    },
    ".Select-menu-outer": {
      backgroundColor: theme.palette.background.paper,
      boxShadow: theme.shadows[2],
      position: "absolute",
      left: 0,
      top: `calc(100% + ${theme.spacing.unit}px)`,
      width: "100%",
      zIndex: 2,
      maxHeight: ITEM_HEIGHT * 7.7,
    },
    ".Select.is-focused:not(.is-open) > .Select-control": {
      boxShadow: "none",
    },
    ".Select-menu": {
      maxHeight: ITEM_HEIGHT * 7.7,
      overflowY: "auto",
    },
    ".Select-menu div": {
      boxSizing: "content-box",
    },
    ".Select-arrow-zone, .Select-clear-zone": {
      color: theme.palette.action.active,
      cursor: "pointer",
      height: 21,
      width: 21,
      zIndex: 1,
    },
    ".Select-aria-only": {
      position: "absolute",
      overflow: "hidden",
      clip: "rect(0 0 0 0)",
      height: 1,
      width: 1,
      margin: -1,
    },
    autocomlete: {
      paddingBottom: 30,
      marginRight: 20,
      fontWeight: 200,
      paddingRight: 20,
      width: 750,
    },
  },
});

/* eslint-disable react/prop-types */
const Option = ({isFocused, isSelected, onFocus = () => {}, children = [], onSelect = () => {}, option}) => {
  const handleClick = event => onSelect(option, event);
  return (
    <MenuItem
      onFocus={onFocus}
      selected={isFocused}
      onClick={handleClick}
      component="div"
      style={{fontWeight: isSelected ? 500 : 400}}
    >
      {children}
    </MenuItem>
  );
};

/* eslint-disable react/prop-types */
const SelectWrapped = (props) => {
  const {classes, ...other} = props;
  return (
    <Select
      optionComponent={Option}
      noResultsText={<Typography>No results found</Typography>}
      valueComponent={(valueProps) => {
        const {value, children, onRemove} = valueProps;
        const onDelete = (event) => {
          event.preventDefault();
          event.stopPropagation();
          onRemove(value);
        };
        if (onRemove) {
          return (
            <Chip
              tabIndex={-1}
              label={children}
              className={classes.chip}
              deleteIcon={<CancelIcon onTouchEnd={onDelete}/>}
              onDelete={onDelete}
            />
          );
        }
        return <div className="Select-value">{children}</div>;
      }}
      {...other}
    />
  );
};

/* eslint-disable react/prop-types */
const Autocomplete = ({items = [], handleChange, selectedItems = [], multi, changeSelectionActionName}) => (
  <div className={styles.autocomlete}>
    <Input
      fullWidth
      inputComponent={SelectWrapped}
      value={selectedItems}
      onChange={handleChange(changeSelectionActionName)}
      placeholder="Выберите из списка или начните вводить название"
      name="react-select-chip"
      inputProps={{
        multi,
        classes: styles,
        instanceId: "react-select-chip",
        id: "react-select-chip",
        options: items.map(item => ({value: item.id, label: item.name})),
      }}
    />
  </div>);

export default withStyles(styles)(Autocomplete);

所以，它工作正常，我可以选择项目，显示更改，但是，当我第一次单击自动完成时，控制台中出现警告消息:

    warning.js:1 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.

Check the render method of `Select`.
    in Option (created by Select)
    in div (created by Select)
    in div (created by Select)
    in div (created by Select)
    in Select (created by SelectWrapped)
    in SelectWrapped (created by Input)
    in div (created by Input)
    in Input (created by WithStyles(Input))
    in WithStyles(Input) (created by Autocomplete)
    in div (created by Autocomplete)
    in Autocomplete (created by WithStyles(Autocomplete))
    in WithStyles(Autocomplete) (created by DivisionReport)
    in span (created by DivisionReport)
    in div (created by DivisionReport)
    in DivisionReport (created by WithStyles(DivisionReport))
    in WithStyles(DivisionReport) (created by OvertimesReport)
    in div (created by Typography)
    in Typography (created by WithStyles(Typography))

那么，如何从控制台删除此警告消息？

Answer 1

这将从您的控制台中删除所有警告。我的建议是保留它并处理你的错误。显然 react-select 需要包装在类组件中。