react.js - react 相互渲染出现的问题

问题描述

问 题

1 想用 react 设计一个多级弹出Menu。想法是设计两个 react 组件 PopupMenu 和 MenuItem, PopupMenu包含多个MenuItem, 鼠标点击 MenuItem 可以弹出PopupMenu。代码大致如下：

//PopupMenu.js
var MenuItem = require("./MenuItem");

var PopupMenu = React.createClass({
      render: function(){
            return ....<MenuItem />....
      }
});

modules.export = PopupMenu;

// MenuItem.js
var PopupMenu = require("./PopupMenu");

var MenuItem = React.createClass({
      render: function(){
            return ....<PopupMenu />....
      }
});

modules.export = MenuItem;

运行时报错：
Element type is invalid: expected a String(for built-in components) or a class/function(for composite components) but got:object. check the render method of ‘MenuItem’

   错误点发生在 MenuItem.js 中的var PopuoMenu = require("./PopupMenu") 中。这个 PopupMenu 是 object 而不是 react function 所以  jsx 的<PopupMenu>不能被识别出来。

   我是用 webpack  解决require模块化的问题。请高人指点一二。

    另外如果在MenuItem中不通过 require 得到 PopupMenu,  而是通过 props 将 PopMenu.js中的PopupMenu传递给MenuItem，问题就解决了。

解决方案

循环加载问题。
假设先执行的是a文件，那么a文件在require b文件时，会记录a文件所执行到的位置，假设第一行;
那么接下来就会执行b文件，在b文件require a文件时，只会读取a文件执行的代码，那么这里也就是第一行而已，所以结果就像你那样报错了。因为根本没有require到所需要的东西。

这篇关于react.js - react 相互渲染出现的问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！