Javascript React prop类型可以递归定义吗？

假设我们正在定义一个React类，它将显示一个树

React.createClass({
    propTypes: {
        tree: treeType
    },
    render: function () {
        // ...
    }
});

这里有一个

treeType

的定义，它显然不起作用，但希望能说明我想要表达的内容

var treeType = React.PropTypes.shape({
    value: React.PropTypes.string,
    children: React.PropTypes.arrayOf(treeType)
})

---

有没有一种方法可以让类型惰性地引用自己，这样就可以工作？

React-prop类型只是一个函数，所以可以像这样惰性地引用它：

function lazyFunction(f) {
    return function () {
        return f.apply(this, arguments);
    };
}

var lazyTreeType = lazyFunction(function () { 
    return treeType;
});

var treeType = React.PropTypes.shape({
    value: React.PropTypes.string.isRequired,
    children: React.PropTypes.arrayOf(lazyTreeType)
})

完整工作示例（）的其余代码：

函数有子级（树）{
return！！（tree.children&&tree.children.length）；
}
var Tree=React.createClass({
道具类型：{
树：树型
},
渲染：函数（）{
返回此.renderForest（[this.props.tree]，“”）；
},
renderTree：函数（树，键）{
return

{tree.value}
{hasChildren（树）&&
this.renderForest（tree.children，key）}
；
},
renderForest：函数（树，关键点）{
返回{trees.map（函数（树）{
返回此.renderTree（tree，key+'|'+tree.value）；
}.bind（这个））}；
}
});
var treeOfLife={value:“生命”，子项：[
{价值观：“动物”，儿童：[
{value:“Dog”}，
{value:“Cat”}
]},
{值：“植物”}
]};
反应(
,
document.getElementById（'tree'）；

结果截图：

---

下面是另一种方法，由以下人员提供：

给定递归组件

树

import React from 'react';

const Tree = ({treeData}) => (
    <div>
        {treeData.nodeName}{' '}
        {treeData.children.map(subTree => (
            <Tree treeData={subTree} />
        ))}
    </div>
);

（作为代码：

),

树的

propTypes

可以定义为：

import PropTypes from 'prop-types';

const treeDataShape = {
    nodeName: PropTypes.string.isRequired,
};
treeDataShape.children = PropTypes.arrayOf(PropTypes.shape(treeDataShape));

Tree.propTypes = {
    treeData: PropTypes.shape(treeDataShape),
};

---

请注意对

treeDataShape

的所有引用如何引用同一对象。创建对象后定义子对象可以递归引用同一对象。

我创建了类似这样的递归属性类型，它对我很有用。让我知道它是否也适合你。lazyTreeType函数的调用次数与对象中的子函数的调用次数相同

const lazyTreeType = () => some_props;
const some_props= PropTypes.shape({
  date: PropTypes.string,
  updated: PropTypes.string,
  name: PropTypes.string,
  sub: PropTypes.arrayOf(lazyTreeType),
  type: PropTypes.string,
});

const component_proptype = PropTypes.shape({
  id: PropTypes.string,
  sub: PropTypes.arrayOf(some_props),
});

---

谢谢你的解决方案。我在寻找同样的东西->不使用的原因：var lazyTreeType=function（）{return treeType.apply（this，arguments）；}@费利佩。我也很好奇this@FelipeT. 我认为你建议的功能没有问题。答案的方法可能只是为了便于理解，而且更为通用。被接受的答案并不适合我，但参考文献共享策略确实如此+1.

const treeData = {
    nodeName: "Root",
    children: [
        {
            nodeName: "Child1",
            children: [
                {nodeName: "GChild1"},
                {nodeName: "GChild2"},
            ]
        },
        {
            nodeName: "Child2",
            children: [
                {nodeName: "GChild3"},
            ]
        },
    ]
};

import PropTypes from 'prop-types';

const treeDataShape = {
    nodeName: PropTypes.string.isRequired,
};
treeDataShape.children = PropTypes.arrayOf(PropTypes.shape(treeDataShape));

Tree.propTypes = {
    treeData: PropTypes.shape(treeDataShape),
};

const lazyTreeType = () => some_props;
const some_props= PropTypes.shape({
  date: PropTypes.string,
  updated: PropTypes.string,
  name: PropTypes.string,
  sub: PropTypes.arrayOf(lazyTreeType),
  type: PropTypes.string,
});

const component_proptype = PropTypes.shape({
  id: PropTypes.string,
  sub: PropTypes.arrayOf(some_props),
});