Question

我有一个组件，它包含ReactJS中的另一个组件，如下所示：

var Child = require('Child');

var Parent = React.createClass({
  render: function() {
    return (
      <div>
         <Child key={someKey} data={someData} />
      </div>
    );   
  },    
});

module.exports = Parent;

然后在我的孩子组件中，我想再次包括父母和孩子。有点像嵌套div彼此。

以下子组件的代码：

var Parent = require('Parent');

var Child = React.createClass({
  render: function() {
    return (
      <div>
        <Parent key={someOtherKey} data={someOtherData} />
      </div>
    );
  }
});

module.exports = Child;

虽然我收到以下错误：Uncaught TypeError: e.toUpperCase is not a function

React允许这种行为吗？如果没有，它应该如何构建？

Answer 1

首先，您的代码中存在循环依赖关系，Parent和Child都需要相互依赖。

为了避免在需要模块时出现无限循环，CommonJS模块的行为如下：

Parent.js需要Child.js，当Child组件调用require('Parent')时，Parent.js的导出值为空对象。因此，e.toUpperCase is not a function（e）是一个空对象，因此您收到错误Parent。

您应该在module.exports声明之后要求：

var Parent = React.createClass({
  render: function() {
    return (
      <div>
         <Child key={someKey} data={someData} />
      </div>
    );   
  },    
});

module.exports = Parent;

var Child = require('Child');

但事件如果这解决了循环依赖，我不明白你想要实现什么，它实际上是一个无限循环。

Answer 2

这是一个以getTreeNode作为共享元素的递归模式。

foreach ($value as $key=>$att_id) {    
    $nums = $key + 1;
...

Answer 3

你想做的事情还可以，但你必须注意不要创建无限递归，所以你需要一个停止条件。

这是JsFiddle可执行示例

function getOffset(depth) {
  var prefix = "";
  for (var i=0;i<depth;i++) {
      prefix = prefix + "-";
  }
  return prefix;
}

var Parent = React.createClass({
    render: function() {
        var offset = getOffset(this.props.depth);
        return <div>{offset}Parent=[<Child depth={this.props.depth}/>{offset}]</div>;
    }
});


var Child = React.createClass({
    render: function() {
        if ( this.props.depth >= 5 ) {
            return false;
        }
        var newDepth = this.props.depth +1;
        var offset = getOffset(this.props.depth);
        return <div>{offset}Child=(<Parent depth={newDepth}/>{offset})</div>;
    }
});

React.render(<Parent depth={0} />, document.body);

输出

Parent=[
Child=(
-Parent=[
-Child=(
--Parent=[
--Child=(
---Parent=[
---Child=(
----Parent=[
----Child=(
-----Parent=[-----]
----)
----]
---)
---]
--)
--]
-)
-]
)
]

这很有趣：）

Answer 4

第一个问题是您无法将两个模块相互导入。第二个问题是你需要检查是否要创建第二个父对象，否则你将得到一个无限循环。像这样：

var Child = require('Child');

var Parent = React.createClass({
  render: function() {
    return (
      <div>
         <Child key={someKey} data={someData} />
      </div>
    );   
  },    
});

module.exports = Parent;

然后：

var Child = React.createClass({
  render: function() {
    var parent = nil;
    if ({hasNestedParent}) {
        var Parent = require('Parent');
        parent = (
            <Parent key={someOtherKey} data={someOtherData} />
        );
    }
    return (
      <div>{parent}</div>
    );
  }
});

module.exports = Child;

请注意，除非需要Parent模块，否则不会将其隐藏在子模块中。

ReactJS：是否可以在其子组件中包含父组件？

4 个答案: