javascript - defaultProps 中的随机数据

我使用 React 已经很长时间了，我遇到了一个有趣的问题:基本上，我想使用 defaultProps 作为 fallbackProps - 这就是它们的用途，但有一个困难 - 来自无状态/defaultProps API 的 class extend Component 属性和缓存getDefaultProps() API 中的 React.createClass 是不可变的(并且是常量)。

例子:

var ExampleComponent = React.createClass({
    getDefaultProps: function () {
        return {
            number: Math.random()
        };
    }
    // ...
});

// or equivalent with ES6 classes

class ExampleComponent extends React.Component {
    // ...
}

ExampleComponent.defaultProps = {
    number: Math.random()
};

// then...

<main>
    <ExampleComponent />            // cached random
    <ExampleComponent />            // cached random
    <ExampleComponent number={1} /> // 1
    <ExampleComponent />            // cached random
    <ExampleComponent />            // cached random
</main>

问题是，我想要动态 defaultProps - 每个组件实例分开。

例子:

<main>
    <ExampleComponent />            // fresh random
    <ExampleComponent />            // fresh random
    <ExampleComponent number={1} /> // 1
    <ExampleComponent />            // fresh random
    <ExampleComponent />            // fresh random
</main>

我知道，使用 state ( getInitialState 是每个组件)很容易实现这种行为，但我想知道是否有可能没有状态和 HOC 或类似的方法。

最佳答案

是的。这可以通过使用 ES5 getter 来定义 defaultProps 对象:

ExampleComponent.defaultProps = Object.create({}, {
  number: {
    enumerable: true,
    get: () => Math.random()
  }
});

Demo

正如您所注意到的，defaultProps 是一个静态成员，因此每个类只初始化一次。然而，当 React.createElement 被调用时，它通过枚举所有属性并将它们复制到一个新的空白对象来创建 defaultProps 的一个新副本(这个枚举是 enumerable: true 必须在描述符中设置的原因)。 Relevant part of React's source :

  // Resolve default props
  if (type && type.defaultProps) {
    var defaultProps = type.defaultProps;
    for (propName in defaultProps) {
      if (props[propName] === undefined) {
        props[propName] = defaultProps[propName];
      }
    }
  }

defaultProps[propName] 调用 getter，这会导致生成一个新的随机数，然后将其存储在 props 中。

关于javascript - defaultProps 中的随机数据，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/37819128/