React按钮点击后无法将Div文本颜色改为绿色的问题求助

问题根源 #

Child组件的state仅在**组件初始化（constructor执行阶段）**从props中获取一次color值，后续父组件state更新导致props.color变化时，Child组件的内部state不会自动同步更新，因此div的颜色始终停留在初始的红色。

解决方法 #

方法一：直接使用props（推荐）

如果Child组件不需要独立管理color状态，完全依赖父组件传递的props，直接渲染this.props.color即可，无需维护子组件自己的state：

class Child extends React.Component {
  render() {
    return (
      <div style={{ color: this.props.color }}> Hello World! </div>
    )
  }
}

方法二：同步props到子组件state（类组件生命周期）

若Child组件必须维护自身state，需要通过生命周期钩子监听props变化并同步更新state：

方式1：使用componentDidUpdate

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: props.color };
  }

  componentDidUpdate(prevProps) {
    // 当props.color发生变化时，更新子组件state
    if (prevProps.color !== this.props.color) {
      this.setState({ color: this.props.color });
    }
  }

  render() {
    return (
      <div style={{ color: this.state.color }}> Hello World! </div>
    )
  }
}

方式2：使用getDerivedStateFromProps（更规范的静态生命周期）

class Child extends React.Component {
  constructor(props) {
    super(props);
    this.state = { color: props.color };
  }

  static getDerivedStateFromProps(nextProps, prevState) {
    // 对比props与state，返回更新后的state或null
    if (nextProps.color !== prevState.color) {
      return { color: nextProps.color };
    }
    return null;
  }

  render() {
    return (
      <div style={{ color: this.state.color }}> Hello World! </div>
    )
  }
}

内容的提问来源于stack exchange，提问作者Alan