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

Question

如果已定义渲染组件所需的所有属性，将变量设置为 true 的最简单方法是什么？

例如：

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

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

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

这是为了防止出现如下错误：

Required prop totalPrice was not specified in ComponentToBeRendered.'

Answer 1

Undefined 是 javascript.In 您的代码中的原语，您将值与字符串 'undefined'

进行比较

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

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

Answer 2

注意：删除 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 3

因为您只是想摆脱警告，所以我建议您从您的属性中删除 "isRequired"。例如：

ES6

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

< ES6

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

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

PS.: 我认为那些 errors/warnings 只在开发模式下显示，但我对此不是 100% 确定。

Answer 4

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

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

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

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

Set a variable to true if all the props are defined

javascript

jsx

reactjs