Languages
[Edit]
DE

React - Erstellen eines einfachen animierten Expanders

3 points
Created by:
Nikki
10100

Hallo! 👋😊

Ich habe heute über die Erstellung eines animierten Expanders in React gedacht und die folgende Lösung erstellt.

Das Endergebnis dieses Beitrags:

Das Beispiel für einen einfachen Expander in React
Das Beispiel für einen einfachen Expander in React

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:

// ONLINE-RUNNER:browser;

// Hinweis: Entkommentieren Sie die Importzeilen, wenn Sie mit dem JSX-Compiler arbeiten.
// import React from 'react';
// import ReactDOM from 'react-dom';

const expanderStyle = {
    margin: '6px 0',
    padding: '2px',
    border: '1px solid #85C1E9'
};

const headerStyle = {
	display: 'flex',
    cursor: 'pointer'
};

const titleStyle = {
    padding: '3px',
	flex: 'none'
};

const spacerStyle = {
	flex: '1'
};

const iconStyle = {
	padding: '3px',
	flex: 'none'
};

const contentStyle = {
	overflow: 'hidden',
    transition: 'all 0.3s'
};

const contentExpandedStyle = {
    ...contentStyle,
    padding: '4px 0',
    border: '1px solid #85C1E9',
    height: 'auto',
    filter: 'opacity(1)'
};

const contentCollapsedStyle = {
    ...contentStyle,
  	padding: '0 0',
    border: '1px solid transparent',
    height: '0',
    filter: 'opacity(0)'
};

const Expander = ({title, children}) => {
    const [expanded, setExpanded] = React.useState(false);
    const handleHeaderClick = () => {
    	setExpanded(expanded => !expanded);
    };
  	return (
      <div style={expanderStyle}>
        <div style={headerStyle} onClick={handleHeaderClick}>
          <div style={titleStyle}>{title}</div>
          <div style={spacerStyle} />
          <div style={iconStyle}>{expanded ? '🔺' : '🔻'}</div>
        </div>
        <div style={expanded ? contentExpandedStyle : contentCollapsedStyle}>
          {children}
        </div>
      </div>
    );
};

// Verwendungsbeispiel:

const App = () => {
  return (
    <div style={{height: '260px'}}>
      <Expander title="🍏🍌🍊 Früchte">
        <ul>
          <li>🍏 Apfel</li>
          <li>🍌 Banane</li>
          <li>🍊 Orange</li>
        </ul>
      </Expander>
      <Expander title="🥕🥒🍅 Gemüse">
        <ul>
          <li>🥕 Karotte</li>
          <li>🥒 Gurke</li>
          <li>🍅 Tomate</li>
        </ul>
      </Expander>
    </div >
  );
};

const root = document.querySelector('#root');
ReactDOM.render(<App/>, root );

Siehe auch

ReactJS - Blog berichten (DE)

Native Advertising
🚀
Get your tech brand or product in front of software developers.
For more information Contact us
Dirask - we help you to
solve coding problems.
Ask question.

❤️💻 🙂

Join