単純なアニメーションエキスパンダ

こんにちは!👋 😊
今日、私は反応でアニメーションエキスパンダーを作成することについて考えていました、そして、私は以下の解決を思いつきました.🔽
開始する前に、私たちは非常に私たちのウェブサイト上のソリューションの実行可能な例をチェックアウトすることをお勧めします:
How to create simple animated expander in React
この短いポストの効果
以下の例では、果物を表示する単純なエキスパンダーを作りました🍉 野菜🍅 Clickイベントのリスト.私は、機能的なコンポーネントの使用とフックを反応させる現代のアプローチを使いました.この場合はuseState フックは、私のエキスパンダーの状態を保存します.🔺🔻
実際例

import React from 'react';

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>
    );
};

// Usage example:

const App = () => {
  return (
    <div style={{height: '260px'}}>
      <Expander title="🍏🍌🍊 Fruits">
        <ul>
          <li>🍏 Apple</li>
          <li>🍌 Banana</li>
          <li>🍊 Orange</li>
        </ul>
      </Expander>
      <Expander title="🥕🥒🍅 Vegetables">
        <ul>
          <li>🥕 Carrot</li>
          <li>🥒 Cucumber</li>
          <li>🍅 Tomato</li>
        </ul>
      </Expander>
    </div >
  );
};

export default App;

この例を実行できますhere
あなたがそれを好きかどうかコメントセクションではわからない!😊

私たちに手紙を書く！

あなたが問題を解決するか、誰も反応またはJavascript話題に関連して答えることができないという質問をするならば、あるいは、あなたはメンタリングが我々に書いているのを探していますdirask.com -> Questions