如何从控制台删除警告？

Question

使用了 redux、react 和material-ui lib \n我有使用react 和redux 的react 组件。从 redux 接收到的状态，因此，\n此组件：

\n\n

import React from "react";\nimport {withStyles} from "material-ui/styles";\nimport {MenuItem} from "material-ui/Menu";\nimport Chip from "material-ui/Chip";\nimport CancelIcon from "@material-ui/icons/Cancel";\nimport Input from "material-ui/Input";\nimport Select from "react-select";\nimport Typography from "material-ui/Typography";\n\nconst ITEM_HEIGHT = 48;\n\nconst styles = theme => ({\n  // Autocomplete styles\n  "@global": {\n    ".Select-control": {\n      display: "flex",\n      alignItems: "center",\n      border: 0,\n      height: "auto",\n      background: "transparent",\n      "&:hover": {\n        boxShadow: "none",\n      },\n    },\n    ".Select-multi-value-wrapper": {\n      flexGrow: 1,\n      display: "flex",\n      flexWrap: "wrap",\n    },\n    ".Select--multi .Select-input": {\n      margin: 0,\n    },\n    ".Select.has-value.is-clearable.Select--single > .Select-control .Select-value": {\n      padding: 0,\n    },\n    ".Select-noresults": {\n      padding: theme.spacing.unit * 2,\n    },\n    ".Select-input": {\n      display: "inline-flex !important",\n      padding: 0,\n      height: "auto",\n    },\n    ".Select-input input": {\n      background: "transparent",\n      border: 0,\n      padding: 0,\n      cursor: "default",\n      display: "inline-block",\n      fontFamily: "inherit",\n      fontSize: "inherit",\n      margin: 0,\n      outline: 0,\n    },\n    ".Select-placeholder, .Select--single .Select-value": {\n      position: "absolute",\n      top: 0,\n      left: 0,\n      right: 0,\n      bottom: 0,\n      display: "flex",\n      alignItems: "center",\n      fontFamily: theme.typography.fontFamily,\n      fontSize: theme.typography.pxToRem(16),\n      padding: 0,\n    },\n    ".Select-placeholder": {\n      opacity: 0.42,\n      color: theme.palette.common.black,\n    },\n    ".Select-menu-outer": {\n      backgroundColor: theme.palette.background.paper,\n      boxShadow: theme.shadows[2],\n      position: "absolute",\n      left: 0,\n      top: `calc(100% + ${theme.spacing.unit}px)`,\n      width: "100%",\n      zIndex: 2,\n      maxHeight: ITEM_HEIGHT * 7.7,\n    },\n    ".Select.is-focused:not(.is-open) > .Select-control": {\n      boxShadow: "none",\n    },\n    ".Select-menu": {\n      maxHeight: ITEM_HEIGHT * 7.7,\n      overflowY: "auto",\n    },\n    ".Select-menu div": {\n      boxSizing: "content-box",\n    },\n    ".Select-arrow-zone, .Select-clear-zone": {\n      color: theme.palette.action.active,\n      cursor: "pointer",\n      height: 21,\n      width: 21,\n      zIndex: 1,\n    },\n    ".Select-aria-only": {\n      position: "absolute",\n      overflow: "hidden",\n      clip: "rect(0 0 0 0)",\n      height: 1,\n      width: 1,\n      margin: -1,\n    },\n    autocomlete: {\n      paddingBottom: 30,\n      marginRight: 20,\n      fontWeight: 200,\n      paddingRight: 20,\n      width: 750,\n    },\n  },\n});\n\n/* eslint-disable react/prop-types */\nconst Option = ({isFocused, isSelected, onFocus = () => {}, children = [], onSelect = () => {}, option}) => {\n  const handleClick = event => onSelect(option, event);\n  return (\n    <MenuItem\n      onFocus={onFocus}\n      selected={isFocused}\n      onClick={handleClick}\n      component="div"\n      style={{fontWeight: isSelected ? 500 : 400}}\n    >\n      {children}\n    </MenuItem>\n  );\n};\n\n/* eslint-disable react/prop-types */\nconst SelectWrapped = (props) => {\n  const {classes, ...other} = props;\n  return (\n    <Select\n      optionComponent={Option}\n      noResultsText={<Typography>No results found</Typography>}\n      valueComponent={(valueProps) => {\n        const {value, children, onRemove} = valueProps;\n        const onDelete = (event) => {\n          event.preventDefault();\n          event.stopPropagation();\n          onRemove(value);\n        };\n        if (onRemove) {\n          return (\n            <Chip\n              tabIndex={-1}\n              label={children}\n              className={classes.chip}\n              deleteIcon={<CancelIcon onTouchEnd={onDelete}/>}\n              onDelete={onDelete}\n            />\n          );\n        }\n        return <div className="Select-value">{children}</div>;\n      }}\n      {...other}\n    />\n  );\n};\n\n/* eslint-disable react/prop-types */\nconst Autocomplete = ({items = [], handleChange, selectedItems = [], multi, changeSelectionActionName}) => (\n  <div className={styles.autocomlete}>\n    <Input\n      fullWidth\n      inputComponent={SelectWrapped}\n      value={selectedItems}\n      onChange={handleChange(changeSelectionActionName)}\n      placeholder="\xd0\x92\xd1\x8b\xd0\xb1\xd0\xb5\xd1\x80\xd0\xb8\xd1\x82\xd0\xb5 \xd0\xb8\xd0\xb7 \xd1\x81\xd0\xbf\xd0\xb8\xd1\x81\xd0\xba\xd0\xb0 \xd0\xb8\xd0\xbb\xd0\xb8 \xd0\xbd\xd0\xb0\xd1\x87\xd0\xbd\xd0\xb8\xd1\x82\xd0\xb5 \xd0\xb2\xd0\xb2\xd0\xbe\xd0\xb4\xd0\xb8\xd1\x82\xd1\x8c \xd0\xbd\xd0\xb0\xd0\xb7\xd0\xb2\xd0\xb0\xd0\xbd\xd0\xb8\xd0\xb5"\n      name="react-select-chip"\n      inputProps={{\n        multi,\n        classes: styles,\n        instanceId: "react-select-chip",\n        id: "react-select-chip",\n        options: items.map(item => ({value: item.id, label: item.name})),\n      }}\n    />\n  </div>);\n\nexport default withStyles(styles)(Autocomplete);\n

\n\n

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

\n\n

    warning.js:1 Warning: Stateless function components cannot be given refs. Attempts to access this ref will fail.\n\nCheck the render method of `Select`.\n    in Option (created by Select)\n    in div (created by Select)\n    in div (created by Select)\n    in div (created by Select)\n    in Select (created by SelectWrapped)\n    in SelectWrapped (created by Input)\n    in div (created by Input)\n    in Input (created by WithStyles(Input))\n    in WithStyles(Input) (created by Autocomplete)\n    in div (created by Autocomplete)\n    in Autocomplete (created by WithStyles(Autocomplete))\n    in WithStyles(Autocomplete) (created by DivisionReport)\n    in span (created by DivisionReport)\n    in div (created by DivisionReport)\n    in DivisionReport (created by WithStyles(DivisionReport))\n    in WithStyles(DivisionReport) (created by OvertimesReport)\n    in div (created by Typography)\n    in Typography (created by WithStyles(Typography))\n

\n\n

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

\n

Answer 1

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