Question

如果定义了渲染组件的所有必需道具，那么将变量设置为true的最简单方法是什么？

E.g：

  renderThing() {
    const {
      bookState,
      totalPrice,
      agentWebPriceDelta,
      numberOfChargeablePassengers,
    } = this.props;

      const requiredProps = bookState !== 'undefined' && totalPrice !== 'undefined' && agentWebPriceDelta !== 'undefined' && numberOfChargeablePassengers !== 'undefined';

      return requiredProps && (
          <ComponentToBeRendered
            ...
          />
        );
    }
  }

这是为了停止收到如下错误：

totalPrice中未指定必需的道具ComponentToBeRendered。＆＃39;

Answer 1

注意：删除undefined周围的引号：

const requiredProps = bookState !== undefined && totalPrice !== undefined && agentWebPriceDelta !== undefined && numberOfChargeablePassengers !== undefined;

你也可以像这样使用 Array.prototype.reduce （不确定它是否更具可读性）：

const requiredProps = [
  bookState,
  totalPrice,
  agentWebPriceDelta,
  numberOfChargeablePassengers
].reduce((prev, value) => prev && value !== undefined, true);

Answer 2

因为你只是想摆脱警告我建议删除＆＃34; isRequired＆＃34;来自你的财产。 e.g：

<强> ES6

YourComponent.propTypes = {
  //instead of this
  bookState: React.PropTypes.string.isRequired,
  //try this
  bookState: React.PropTypes.string,
};

<强>＆LT; ES6

propTypes: {
  //instead of this
  bookState: React.PropTypes.string.isRequired,
  //try this
  bookState: React.PropTypes.string,
},

如果在响应中指定了属性，则在缺少必需属性时将始终收到此错误。如果您还想要渲染没有所有属性的Component，则应该为可能丢失的（并且不是必需的）设置defaultProps。因此，请始终考虑何时设置所需的属性以及何时不需要。

PS：我认为这些错误/警告仅在开发模式下显示，但我对此并不是100％肯定。

Answer 3

Undefined是javascript中的原语。在您的代码中，您将值与字符串'undefined'进行比较

typeof bookState !== 'undefined'或bookState !== undefined

  const requiredProps = bookState !== undefined && totalPrice !== undefined && agentWebPriceDelta !== undefined && numberOfChargeablePassengers !== undefined;

Answer 4

我建议使用React的propTypes来强制执行必填字段。对于您的示例，在ComponentToBeRendered类定义之后，您将包括：

ComponentToBeRendered.propTypes = {
  bookState: React.PropTypes.isRequired,
  totalPrice: React.PropTypes.isRequired,
  agentWebPriceDelta: React.PropTypes.isRequired,
  numberofChargeablePassengers: React.PropTypes.isRequired
};

在组件上使用propTypes将强制执行字段要求。您还可以使用propTypes来确保属性类型正确。

如果定义了所有道具，则将变量设置为true

4 个答案: