Languages
[Edit]
DE

React - Erstellen eines einfachen animierten Expanders

3 points
Created by:
Nikki
10460

In diesem kurzen Artikel wird gezeigt, wie man einen einfachen Expander in React erstellen kann. 

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

Schnelle Lösung:

// 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 silver'
};

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 silver',
    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 );

Expander mit Beispiel für ein aktives Element

In dieser Sektion wird von den Expanderelementen ein gemeinsamer Kontext verwendet, der es nicht zulässt, dass mehr als ein Element gleichzeitig expandiert wird.

// 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 = {
    padding: '0 2px',
    border: '1px solid silver'
};

const itemStyle = {
    margin: '2px 0',
    padding: '2px',
    border: '1px solid silver'
};

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 silver',
    height: 'auto',
    filter: 'opacity(1)'
};

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

const ExpanderContext = React.createContext();

const Expander = ({children}) => {
    const [expandedItem, setExpandedItem] = React.useState(null);
    const expander = {
      	isExpandedItem: (title) => title === expandedItem,
      	setExpandedItem: (title) => {
    		setExpandedItem(expandedItem === title ? null : title);
        }
    };
  	return (
      <ExpanderContext.Provider value={expander}>
        <div style={expanderStyle}>
          {children}
        </div>
      </ExpanderContext.Provider>
    );
};

const Item = ({title, children}) => {
  	const expander = React.useContext(ExpanderContext);
  	const expanded = expander.isExpandedItem(title);
  	const handleHeaderClick = () => {
    	expander.setExpandedItem(title);
    };
  	return (
      <div style={itemStyle}>
        <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={{width: '500px', height: '250px'}}>
      <Expander>
        <Item title="🍏🍌🍊 Früchte">
          <ul>
            <li>🍏 Apfel</li>
            <li>🍌 Banane</li>
            <li>🍊 Orange</li>
          </ul>
        </Item>
        <Item title="🥕🥒🍅 Gemüse">
          <ul>
            <li>🥕 Karotte</li>
            <li>🥒 Gurke</li>
            <li>🍅 Tomate</li>
          </ul>
        </Item>
      </Expander>
    </div >
  );
};

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

Verweise

ReactJS (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