import React, { Component } from 'react';

class ColorPicker extends Component {
  // 初始 state
  state = {
    selectedColor: '#FF4444', // 默认颜色
    tempColor: '' // 派生的临时颜色
  };

  // 核心：静态方法，从 props 派生 state
  static getDerivedStateFromProps(nextProps, prevState) {
    // 对比新 props 和旧 state，判断是否需要更新 state
    if (nextProps.defaultColor !== prevState.selectedColor) {
      // 返回需要更新的 state 字段
      return {
        selectedColor: nextProps.defaultColor, // 用 props 覆盖 state
        tempColor: `${nextProps.defaultColor}-temp` // 派生额外 state
      };
    }
    // 不需要更新时返回 null
    return null;
  }

  // 手动切换颜色
  handleChangeColor = (color) => {
    this.setState({ selectedColor: color });
  };

  render() {
    const { selectedColor, tempColor } = this.state;
    return (
      <div>
        <div style={{width: '60px', height: '60px', backgroundColor: selectedColor, margin: '10px 0'}} />
        <p>当前选中颜色（来自 props/state）：{selectedColor}</p>
        <p>派生的临时颜色：{tempColor}</p>
        <button onClick={() => this.handleChangeColor('#0099CC')}>切换为蓝色</button>
      </div>
    );
  }
}

// 父组件使用
class Parent extends Component {
  state = {
    parentColor: '#FF4444'
  };

  // 模拟 props 变化
  changeParentColor = () => {
    this.setState({ parentColor: '#FF9900' });
  };

  render() {
    return (
      <div>
        <button onClick={this.changeParentColor}>父组件修改默认颜色</button>
        <ColorPicker defaultColor={this.state.parentColor} />
      </div>
    );
  }
}

export default Parent;