javascript - 具有自定义属性的 React.createClass

Question

如何在 React.createClass() 中处理自定义 JavaScript 属性？

这里是示例:

var RouterView = React.createClass({
  mixins: [Morearty.Mixin],
  isAuthorized: false,      // should it be part of state ??
  isVerified: false,        // should it be part of state ??
  bindToAuthorization: function() {
    if(/* blah-blah-blah */) {
      this.isAuthorized = true; 
    }
  },
  render: ...
});

看起来 .isAuthorized 和 .isVerified 在语义上应该像组件的状态一样，但它只是 .createClass() 规范的属性。

.isAuthorized 和 .isVerified 如何运作？它的行为类似于static吗？在 React 的文档中找不到任何有关此内容的信息。

Answer 1

这取决于授权发生的地点。

如果确定授权的逻辑发生在子组件中 - 并且仅在子组件中 - 那么它将处于子组件状态。这意味着 isAuthorized、isVerified 不会是 props，它们将是子组件中的状态。 bindToAuthorization 将由组件本身定义，而不是其父组件。

更有可能的是，您希望授权逻辑位于组件层次结构中的更高位置，或者完全位于组件层次结构之外(如果使用 Flux)。

请记住，低阶组件通常不需要任何状态。父组件可以简单地在不同的 props 中重新渲染它们。这使得您的 bindToAuthorization 变得不必要。父组件不需要将授权逻辑委托(delegate)给子组件；当相关属性发生变化时，它只是重新渲染它。