Question

我对React getDerivedStateFromProps生命周期方法有些困惑。以下是一个示例，您可以找到有效的codesandbox here。我想做的是更改父级的子状态（从父级关闭）。

import React, { Component } from "react";
import { render } from "react-dom";

class Parent extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOn: true
    };

    this.turnOff = this.turnOff.bind(this);
  }

  turnOff(event) {
    event.preventDefault();
    this.setState({
      isOn: false
    });
  }

  render() {
    return (
      <div>
        <Child isOn={this.state.isOn} />
        <p>
          <a href="#" onClick={this.turnOff}>
            Turn Off From Parent
          </a>
        </p>
      </div>
    );
  }
}

class Child extends Component {
  constructor(props) {
    super(props);

    this.state = {
      isOn: false
    };

    this.turnOff = this.turnOff.bind(this);
    this.turnOn = this.turnOn.bind(this);
  }

  turnOff(event) {
    event.preventDefault();
    this.setState({
      isOn: false
    });
  }

  turnOn(event) {
    event.preventDefault();
    this.setState({
      isOn: true
    });
  }

  static getDerivedStateFromProps(props, state) {
    if (props.isOn) {
      return { ...state, isOn: true };
    }

    return null;
  }

  render() {
    const toggleState = this.state.isOn ? "ON" : "OFF";
    return (
      <div>
        <p>I am {toggleState}</p>
        <p>
          <a href="#" onClick={this.turnOn}>
            Turn On From Child
          </a>{" "}
          |{" "}
          <a href="#" onClick={this.turnOff}>
            Turn Off From Child
          </a>
        </p>
      </div>
    );
  }
}

render(<Parent />, document.getElementById("app"));

我确实读过You Probably Don't Need Derived State。但是，我想知道是否有一种方法可以在没有完全受控的组件或完全不受控制的带有键的组件的情况下解决此问题，因为这里唯一的问题是每次getDerivedStateFromProps都会触发当本地状态更改时，与componentWillReceiveProps不同，CGPoint(x:cos(angle) * radius, y:sin(angle) * radius)在父组件呈现子组件时运行。

正确使用React getDerivedStateFromProps来控制子组件状态

0 个答案: