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))

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

标签： reactjsredux

Answer 1

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