lovecoding
/
w1020


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183
							<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <script src="./babel.min.js"></script>
  <script src="./react.development.js"></script>
  <script src="./react-dom.development.js"></script>
</head>

<body>
  <div id="root"></div>
  <script type="text/babel">
    const root = ReactDOM.createRoot(document.getElementById("root"));
    function App() {
      return (
        <div>
          <ColorSwitcherContainer />
        </div>
      )
    }

    // 纯函数组件 - 负责UI展示
    function ColorSwitcher(props) {
      const { currentColor, colors, onColorClick } = props;

      return (
        <div style={containerStyle}>
          <h2 style={titleStyle}>颜色点击切换器</h2>

          {/* 颜色展示区 */}
          <div
            style={{
              ...colorDisplayStyle,
              backgroundColor: currentColor.code
            }}
          >
            <span style={colorNameStyle}>
              {currentColor.name}
            </span>
            <span style={colorCodeStyle}>
              {currentColor.code}
            </span>
          </div>

          {/* 颜色选择区 */}
          <div style={colorSelectorStyle}>
            {colors.map((color, index) => (
              <button
                key={index}
                onClick={() => onColorClick(index)}
                style={{
                  ...colorButtonStyle,
                  backgroundColor: color.code,
                  border: currentColor.code === color.code ? '3px solid #333' : 'none'
                }}
                title={color.name}
              />
            ))}
          </div>

          <p style={instructionStyle}>点击下方颜色块切换颜色</p>
        </div>
      );
    }

    // 类组件 - 负责状态管理
    class ColorSwitcherContainer extends React.Component {
      constructor(props) {
        super(props);

        // 颜色数据
        this.colors = [
          { name: '红色', code: '#ff4444' },
          { name: '绿色', code: '#00C851' },
          { name: '蓝色', code: '#33b5e5' },
          { name: '黄色', code: '#ffbb33' },
          { name: '紫色', code: '#aa66cc' },
          { name: '橙色', code: '#ff9900' },
          { name: '粉色', code: '#ff4444' },
          { name: '青色', code: '#00ffff' }
        ];

        this.state = {
          currentIndex: 0 // 默认选中第一个颜色
        };

        // 绑定事件处理函数
        this.handleColorClick = this.handleColorClick.bind(this);
      }

      // 处理颜色点击
      handleColorClick(index) {
        this.setState({
          currentIndex: index
        });
      }

      render() {
        const currentColor = this.colors[this.state.currentIndex];

        return (
          <ColorSwitcher
            currentColor={currentColor}
            colors={this.colors}
            onColorClick={this.handleColorClick}
          />
        );
      }
    }

    // 样式定义
    const containerStyle = {
      maxWidth: '500px',
      margin: '20px auto',
      padding: '20px',
      textAlign: 'center',
      fontFamily: 'Arial, sans-serif'
    };

    const titleStyle = {
      color: '#333',
      marginBottom: '20px'
    };

    const colorDisplayStyle = {
      width: '100%',
      height: '150px',
      borderRadius: '8px',
      marginBottom: '25px',
      display: 'flex',
      flexDirection: 'column',
      justifyContent: 'center',
      alignItems: 'center',
      transition: 'background-color 0.3s ease'
    };

    const colorNameStyle = {
      fontSize: '24px',
      fontWeight: 'bold',
      color: 'white',
      textShadow: '0 1px 2px rgba(0,0,0,0.5)',
      margin: '0 0 5px 0'
    };

    const colorCodeStyle = {
      fontSize: '16px',
      color: 'white',
      textShadow: '0 1px 2px rgba(0,0,0,0.5)',
      margin: 0
    };

    const colorSelectorStyle = {
      display: 'flex',
      flexWrap: 'wrap',
      gap: '10px',
      justifyContent: 'center',
      marginBottom: '20px'
    };

    const colorButtonStyle = {
      width: '50px',
      height: '50px',
      borderRadius: '50%',
      cursor: 'pointer',
      transition: 'transform 0.2s ease',
      outline: 'none',
      '&:hover': {
        transform: 'scale(1.1)'
      }
    };

    const instructionStyle = {
      color: '#666',
      fontSize: '14px'
    };
    root.render(<App />);
  </script>
</body>

</html>