Javascript 未捕获引用错误：未定义父项

根据这里的文档，我正在使用django管道和browserify-

我在加载NPM/Bower软件包时，它工作得非常好，就像这样-

'build_js': {
    'source_filenames': (
        'js/bower_components/jquery/dist/jquery.js',
        'bootstrap/js/bootstrap.js',
        'js/bower_components/react/react-with-addons.js',
        'js/bower_components/react/react-dom.js',
        'datatables/js/jquery.dataTables.js',
        'datatables/js/dataTables.bootstrap.js',
        'js/node_modules/marked/marked.min.js',
        'js/node_modules/react-router/umd/ReactRouter.js',
        'js/child.js',
        'js/parent.js',
        'js/build.browserify.js',
    ),
    'output_filename': 'js/build_js.js',

问题是我试图在build.browserify.js中引用child.js和parent.js

ReactDOM.render(
  <Parent />,
  document.getElementById('content')
);

这是3个文件的内容-

child.js

var Child = React.createClass({
  render: function(){
    return (
      <div>
        and this is the <b>{this.props.name}</b>.
      </div>
    )
  }
});

这是该文件的内容-

(function e(t,n,r){function s(o,u){if(!n[o]){if(!t[o]){var a=typeof require=="function"&&require;if(!u&&a)return a(o,!0);if(i)return i(o,!0);var f=new Error("Cannot find module '"+o+"'");throw f.code="MODULE_NOT_FOUND",f}var l=n[o]={exports:{}};t[o][0].call(l.exports,function(e){var n=t[o][1][e];return s(n?n:e)},l,l.exports,e,t,n,r)}return n[o].exports}var i=typeof require=="function"&&require;for(var o=0;o<r.length;o++)s(r[o]);return s})({1:[function(require,module,exports){
ReactDOM.render(
  React.createElement(Parent, null),
  document.getElementById('content')
);

},{}]},{},[1]);

---

代码>（函数e（t，n，n，r）若（t，t，n，n，r）若（t（t，t，n，n，r）若（t（t，t，n，n，n，r）若（t，n，n）若（t，n，n）若（t，n，n，r）若（t）若（t）若（t（t，n，n，n，n，r）若）若（t，（t，n，n，n，n，n，n，r）若）若（t，（t（t，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，r）若）若（t，（t）若（t，（t，n，n，（t，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n，n）若r）}返回n[o] .exports}var i=typeof require==“function”&&require；for（var o=0；o@taylorc93在这方面是正确的，但是您缺少了一个额外的步骤

除了必须在要包含父模块的任何文件中执行

require（'./parent'）

，还需要实际导出

parent.js

文件的内容。因此，

parent.js

应该如下所示：

child.js

var React = require('react');

modules.export = React.createClass({
  displayName: 'Child', // Always setting React component's displayName  will make your error messages easier to understand
  render: function(){
    return (
      <div>
        and this is the <b>{this.props.name}</b>.
      </div>
    )
  }
});

var React = require('react');
var Child = require('./child');

modules.export = React.createClass({
  displayName: 'Parent', // Always setting React component's displayName  will make your error messages easier to understand
  render: function(){
    return (
      <div>
        <div> This is the parent. </div>
        <Child name="child"/>
      </div>
    )
  }
});

var ReactDOM = require('react-dom');
var Parent = require('./parent');

ReactDOM.render(
    <Parent />, 
    document.getElementById('app')
);

var React=require（'React'）；
modules.export=React.createClass({
displayName:'子'，//始终设置React组件的displayName将使错误消息更容易理解
render:function（）{
返回(
这是{this.props.name}。
)
}
});

parent.js

var React = require('react');

modules.export = React.createClass({
  displayName: 'Child', // Always setting React component's displayName  will make your error messages easier to understand
  render: function(){
    return (
      <div>
        and this is the <b>{this.props.name}</b>.
      </div>
    )
  }
});

var React = require('react');
var Child = require('./child');

modules.export = React.createClass({
  displayName: 'Parent', // Always setting React component's displayName  will make your error messages easier to understand
  render: function(){
    return (
      <div>
        <div> This is the parent. </div>
        <Child name="child"/>
      </div>
    )
  }
});

var ReactDOM = require('react-dom');
var Parent = require('./parent');

ReactDOM.render(
    <Parent />, 
    document.getElementById('app')
);

var React=require（'React'）；
var Child=require（“./Child”）；
modules.export=React.createClass({
displayName:'父'，//始终设置React组件的displayName将使错误消息更容易理解
render:function（）{
返回(
这是家长。
)
}
});

build.browserify.js

var React = require('react');

modules.export = React.createClass({
  displayName: 'Child', // Always setting React component's displayName  will make your error messages easier to understand
  render: function(){
    return (
      <div>
        and this is the <b>{this.props.name}</b>.
      </div>
    )
  }
});

var React = require('react');
var Child = require('./child');

modules.export = React.createClass({
  displayName: 'Parent', // Always setting React component's displayName  will make your error messages easier to understand
  render: function(){
    return (
      <div>
        <div> This is the parent. </div>
        <Child name="child"/>
      </div>
    )
  }
});

var ReactDOM = require('react-dom');
var Parent = require('./parent');

ReactDOM.render(
    <Parent />, 
    document.getElementById('app')
);

var ReactDOM=require（'react-dom'）；
var Parent=需要（“./Parent”）；
ReactDOM.render(
, 
document.getElementById（'app'）
);

---

此外，虽然不是必需的，但最好将组件文件命名为大写，就像在Java中对文件进行分类一样。大多数应用程序也会将根文件命名为

app.js

或

main.js

或类似名称，而不是

build.browserify.js

，这在技术上有点含糊不清，因为该文件没有任何内容o使用building或Browserify。

你确定你正确地转换了JSX吗？

未捕获的语法错误：意外标记如果我将所有代码放在一个文件中，它可以正常工作。更新以显示这一点。你是否也
要求
删除每个文件中的所有依赖项？例如，在parent.js:
require（'/path/to/child'））；
尝试过，特别是
var Parent=require（'Parent'））
在
Parent
，
Parent
，
Parent.js
，
/Parent
等的一些变体上。这些文件都位于相同的位置。在任何情况下，我都会遇到以下错误-错误：无法从“/var/www/app/static/js”中找到模块“Parent”，该模块位于名为
Parent.js
的文件中使用
模块导入父组件。导出
？这是在加载文件，但它抱怨道具为null，如果我将所有内容都包含在一个文件中，它就不会这样做。此外，我不需要调用var React或var ReactDOM，因为它由django管道/browserify处理。这是我在使用paren时遇到的错误t/child added-
ReactDOM.render（React.createElement（Parent，null），document.getElementById（'content'）；
认为这需要一个新问题？
警告：React.createElement:type不应为null、未定义、布尔或数字。它应该是字符串（对于DOM元素）或ReactClass（对于复合组件）.
很抱歉，我不熟悉
django管道/browserify
。应该回答有关该警告的问题。基本上，只需执行
React.createElement（父级）
。如果还包括文档中所述的第三个参数，则仅在中添加
null
。对于处理props错误，最好将
PROPTYES
字段添加到组件中。这样，如果它们没有正确通过，React将向您提供相当好的错误消息，解释原因。