将基于材料UI反应自动建议功能转换为基于类组件

Question

我正在使用Material UI react autosuggest来制作我的应用程序。但这是基于函数的，我的代码是基于类组件的。因此，我想将该代码转换为基于类组件的代码。如果有人告诉我如何将其转换为基于组件的，这将非常有帮助。

import React from 'react';
import deburr from 'lodash/deburr';
import Autosuggest from 'react-autosuggest';
import match from 'autosuggest-highlight/match';
import parse from 'autosuggest-highlight/parse';
import TextField from '@material-ui/core/TextField';
import Paper from '@material-ui/core/Paper';
import MenuItem from '@material-ui/core/MenuItem';
import Popper from '@material-ui/core/Popper';
import { makeStyles } from '@material-ui/core/styles';
const suggestions = [
{ label: 'Afghanistan' },
{ label: 'Aland Islands' },
{ label: 'Albania' },
{ label: 'Algeria' },
{ label: 'American Samoa' },
{ label: 'Andorra' },
{ label: 'Angola' },
{ label: 'Anguilla' },
{ label: 'Antarctica' },
{ label: 'British Indian Ocean Territory' },
{ label: 'Brunei Darussalam' },
];
function renderInputComponent(inputProps) {
const { classes, inputRef = () => {}, ref, ...other } = inputProps;
return (
<TextField
fullWidth
InputProps={{
inputRef: node => {
ref(node);
inputRef(node);
},
classes: {
input: classes.input,
},
}}
{...other}
/>
);
}
function renderSuggestion(suggestion, { query, isHighlighted }) {
const matches = match(suggestion.label, query);
const parts = parse(suggestion.label, matches);
return (
<MenuItem selected={isHighlighted} component="div">
<div>
{parts.map(part => (
<span key={part.text} style={{ fontWeight: part.highlight ? 500 : 400 }}>
{part.text}
</span>
))}
</div>
</MenuItem>
);
}
function getSuggestions(value) {
const inputValue = deburr(value.trim()).toLowerCase();
const inputLength = inputValue.length;
let count = 0;
return inputLength === 0
? []
: suggestions.filter(suggestion => {
const keep =
count < 5 && suggestion.label.slice(0, inputLength).toLowerCase() === inputValue;
if (keep) {
count += 1;
}
return keep;
});
}
function getSuggestionValue(suggestion) {
return suggestion.label;
}
const useStyles = makeStyles(theme => ({
root: {
height: 250,
flexGrow: 1,
},
container: {
position: 'relative',
},
suggestionsContainerOpen: {
position: 'absolute',
zIndex: 1,
marginTop: theme.spacing(1),
left: 0,
right: 0,
},
suggestion: {
display: 'block',
},
suggestionsList: {
margin: 0,
padding: 0,
listStyleType: 'none',
},
divider: {
height: theme.spacing(2),
},
}));
export default function IntegrationAutosuggest() {
const classes = useStyles();
const [anchorEl, setAnchorEl] = React.useState(null);
const [state, setState] = React.useState({
single: '',
popper: '',
});
const [stateSuggestions, setSuggestions] = React.useState([]);
const handleSuggestionsFetchRequested = ({ value }) => {
setSuggestions(getSuggestions(value));
};
const handleSuggestionsClearRequested = () => {
setSuggestions([]);
};
const handleChange = name => (event, { newValue }) => {
setState({
...state,
[name]: newValue,
});
};
const autosuggestProps = {
renderInputComponent,
suggestions: stateSuggestions,
onSuggestionsFetchRequested: handleSuggestionsFetchRequested,
onSuggestionsClearRequested: handleSuggestionsClearRequested,
getSuggestionValue,
renderSuggestion,
};
return (
<div className={classes.root}>
<Autosuggest
{...autosuggestProps}
inputProps={{
classes,
id: 'react-autosuggest-simple',
label: 'Country',
placeholder: 'Search a country (start with a)',
value: state.single,
onChange: handleChange('single'),
}}
theme={{
container: classes.container,
suggestionsContainerOpen: classes.suggestionsContainerOpen,
suggestionsList: classes.suggestionsList,
suggestion: classes.suggestion,
}}
renderSuggestionsContainer={options => (
<Paper {...options.containerProps} square>
{options.children}
</Paper>
)}
/>
</div>
);
}

这有点紧急。如果你对此有所了解，请告诉我。

Answer 1

最简单答案

const Header = (props)=>{
return  <h1>I am header Component</h1>; 
}
export default Header;

如果你希望你使用ES6格式相同的代码将成为

class Header extends React.Component{
constructor(props){
super(props); 
this.state = {
// your state 
}
}
render(){
return (
<h1>I am header Component</h1>
);
}
}
export default Header;

有关的详细信息，请参阅此链接