将React类建立在Prop Change上

Question

所以我的反应类组件遇到了这个问题。 由于它处理“很多”状态，我不想使用功能组件，因为我认为它更具可读性。 在我的类组件下面几层，我有一个功能组件，它将选定的功能从复选框分派到 redux 状态。

我的类组件需要了解这些更改，并根据存储在 redux 存储中的所选功能重新渲染。

问题是，它总是从 mapStaeToProps 函数获取新的道具，但我无法基于新的道具 setState(...) ， bc componentDidMount 在开始时只运行一次，或者 componentWillReceiveProps() 不再存在。

import { connect } from 'react-redux';

import TaggingComponent from '../../../content-components/TaggingComponent';
import SupplyAmount from '../../../content-components/SupplyAmount';
import FeaturesComponent from '../../../content-components/FeaturesComponent';
import './TokenGenerator.css';

const features = {
  Features: [
    'Mintable',
    'Burnable',
    'Pausable',
    'Permit',
    'Votes',
    'Flash Minting',
    'Snapchots'
  ],
  'Access Control': ['Ownable', 'Roles'],
  Upgradeability: ['Transparent', 'UUPS']
};

class TokenGenerator extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      tokenName: '',
      shortName: '',
      supplyAmount: null,
      selectedFeatures: this.props.selectedFeatures
    };
  }

  static getDerivedStateFromProps(props, current_state) {
    if (current_state.selectedFeatures !== props.selectedFeatures) {
      return {
        selectedFeatures: props.selectedFeatures
      };
    }
    return null;
  }

  setTokenName = (e) => {
    this.setState({ tokenName: e.target.value });
  };

  setShortageName = (e) => {
    this.setState({ shortName: e.target.value });
  };

  setAmount = (e) => {
    this.setState({ supplyAmount: e.target.value });
  };

  render() {
    return (
      <div className="grid grid-cols-7 gap-10">
        {/* Name and shortage input */}
        <TaggingComponent
          setTokenName={this.setTokenName}
          setShortageName={this.setShortageName}
        />
        {/* Token supply */}
        <SupplyAmount setAmount={this.setAmount} />
        {/* Tokenfeatures */}

        <FeaturesComponent features={features} />

        {/* Selected Features listing */}
        <div className="card-bg border-2 border-white text-white p-11 rounded col-span-5 row-span-5">
          <h4 className="text-center">Selected Features</h4>
          {this.state.selectedFeatures.map((feature) => {
            return <p key={feature}>{feature}</p>;
          })}
        </div>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log(state);
  return { selectedFeatures: state.tokenGeneratorState.selectedFeatures };
};

export default connect(mapStateToProps)(TokenGenerator);

新的 getDerivedStateFromProps 方法是更新状态 vom 更改 props 的唯一方法吗？

干杯

Answer 1

您不需要为每个道具更改设置状态。因为只要任何一个 props 发生变化，接收 props 的组件就会自动重新渲染。

以此为例，

class ComponentA {
    render() {
        <ComponentB someProp={someDynamicallyChangingValue} />
    }
}

class ComponentB {
    render() {
        <div>{this.props.someProp}</div>
    }
}

只要 ComponentA 中的 someProp 发生变化，ComponentB 就会自动重新渲染。