如何在反应组件中找出道具是否为节点？

Question

我有一个React.Component，里面有这些道具：

Test.propTypes = {
   ...
   ...
   example: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
};

我需要在render()方法中知道example的类型是节点还是对象？

Answer 1

在代码中，here是用于PropTypes.node验证的内容：

  function isNode(propValue) {
    switch (typeof propValue) {
      case 'number':
      case 'string':
      case 'undefined':
        return true;
      case 'boolean':
        return !propValue;
      case 'object':
        if (Array.isArray(propValue)) {
          return propValue.every(isNode);
        }
        if (propValue === null || isValidElement(propValue)) {
          return true;
        }

        var iteratorFn = getIteratorFn(propValue);
        if (iteratorFn) {
          var iterator = iteratorFn.call(propValue);
          var step;
          if (iteratorFn !== propValue.entries) {
            while (!(step = iterator.next()).done) {
              if (!isNode(step.value)) {
                return false;
              }
            }
          } else {
            // Iterator will provide entry [k,v] tuples rather than values.
            while (!(step = iterator.next()).done) {
              var entry = step.value;
              if (entry) {
                if (!isNode(entry[1])) {
                  return false;
                }
              }
            }
          }
        } else {
          return false;
        }

        return true;
      default:
        return false;
    }
  }

React仅提供功能React.isValidElement()，因此您需要实施自己的检查以确定它是否是有效节点，或实现更具体的道具类型（即[PropTypes.string, PropTypes.object]），并且检查。

Answer 2

prop-types不会导出任何此类功能，但是我们可以通过以下操作来实现

Test.propTypes = {
   ...
   ...
   example: PropTypes.oneOfType([PropTypes.node, PropTypes.object]),
};

import React, { Component } from 'react';
class Test extends component 
{
    render() {
        const isNode = React.isValidElement(example) 
//isNode is false, we consider it as object
    }
}

React.isValidElement