DE
React - Erstellen eines einfachen animierten Expanders
3 points
Hallo! 👋😊
Ich habe heute über die Erstellung eines animierten Expanders in React gedacht und die folgende Lösung erstellt.
Das Endergebnis dieses Beitrags:
Im folgenden Beispiel habe ich einen einfachen Expander erstellt, der beim Anklicken Listen mit Früchten 🍉 und Gemüse🍅 anzeigt. Ich habe einen aktuellen Lösungsweg gewählt, der die Verwendung von Funktionskomponenten und React-Hooks beinhaltet. In diesem Fall speichert useState - Hook den Zustand meines meines Expanders. 🔺🔻
Lauffähiges Beispiel:
xxxxxxxxxx1
// Hinweis: Entkommentieren Sie die Importzeilen, wenn Sie mit dem JSX-Compiler arbeiten.2
// import React from 'react';3
// import ReactDOM from 'react-dom';4
5
const expanderStyle = {6
margin: '6px 0',7
padding: '2px',8
border: '1px solid #85C1E9'9
};10
11
const headerStyle = {12
display: 'flex',13
cursor: 'pointer'14
};15
16
const titleStyle = {17
padding: '3px',18
flex: 'none'19
};20
21
const spacerStyle = {22
flex: '1'23
};24
25
const iconStyle = {26
padding: '3px',27
flex: 'none'28
};29
30
const contentStyle = {31
overflow: 'hidden',32
transition: 'all 0.3s'33
};34
35
const contentExpandedStyle = {36
contentStyle,37
padding: '4px 0',38
border: '1px solid #85C1E9',39
height: 'auto',40
filter: 'opacity(1)'41
};42
43
const contentCollapsedStyle = {44
contentStyle,45
padding: '0 0',46
border: '1px solid transparent',47
height: '0',48
filter: 'opacity(0)'49
};50
51
const Expander = ({title, children}) => {52
const [expanded, setExpanded] = React.useState(false);53
const handleHeaderClick = () => {54
setExpanded(expanded => !expanded);55
};56
return (57
<div style={expanderStyle}>58
<div style={headerStyle} onClick={handleHeaderClick}>59
<div style={titleStyle}>{title}</div>60
<div style={spacerStyle} />61
<div style={iconStyle}>{expanded ? '🔺' : '🔻'}</div>62
</div>63
<div style={expanded ? contentExpandedStyle : contentCollapsedStyle}>64
{children}65
</div>66
</div>67
);68
};69
70
// Verwendungsbeispiel:71
72
const App = () => {73
return (74
<div style={{height: '260px'}}>75
<Expander title="🍏🍌🍊 Früchte">76
<ul>77
<li>🍏 Apfel</li>78
<li>🍌 Banane</li>79
<li>🍊 Orange</li>80
</ul>81
</Expander>82
<Expander title="🥕🥒🍅 Gemüse">83
<ul>84
<li>🥕 Karotte</li>85
<li>🥒 Gurke</li>86
<li>🍅 Tomate</li>87
</ul>88
</Expander>89
</div >90
);91
};92
93
const root = document.querySelector('#root');94
ReactDOM.render(<App/>, root );