Question

我有一个名为SkiDaysCount的react组件，在其中输出一些数据并进行简单的计算。

使用诸如此类的getDefaultProps方法声明默认道具有什么区别

getDefaultProps() {
  return {
    total: 50,
    powder: 50,
    backcountry: 15,
    goal: 75
  };
}

并像这样在您的App.js / Index.js中分配它们：

SkiDaysCount.defaultProps = {
  total: 50,
  powder: 10,
  BackCountry: 15,
  goal: 75
};

然后仅在放置组件的位置内分配值

<SkiDaysCount
  total={70}
  powder={20}
  backcountry={10}
  goal={75}
/>

Answer 1

使用getDefaultProps方法曾经是set default props with createReactClass的方法。这种设置默认道具的方法不适用于ES6类，因此您需要为此使用defaultProps。

示例

class SkiDaysCount1 extends React.Component {
  getDefaultProps() {
    return {
      total: 50,
      powder: 50,
      backcountry: 15,
      goal: 75
    };
  }

  render() {
    return <div>{JSON.stringify(this.props)}</div>;
  }
}

class SkiDaysCount2 extends React.Component {
  static defaultProps = {
    total: 50,
    powder: 50,
    backcountry: 15,
    goal: 75
  };

  render() {
    return <div>{JSON.stringify(this.props)}</div>;
  }
}

ReactDOM.render(
  <div>
    <SkiDaysCount1 />
    <SkiDaysCount2 />
  </div>,
  document.getElementById("root")
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="root"></div>

类内部的getDefaultProps方法与class.DefaultProps

1 个答案: