React js isomorfic 应用程序不会使用 require() 安装组件

Question

我是 React 的新手，所以我在理解我的代码中的错误时遇到了一些麻烦。我正在用 node js express 和 reactjs 编写基本的网络应用程序。我使用库进行反应：'react-dynamic-list' 但如果我需要来自另一个文件的我自己的代码，也会发生同样的事情。这是我的 server.js :

var express = require('express');
var app = express();
var path = require('path');
require('babel-register')({
    presets: ['es2015', 'react']
});

app.engine('jade', require('jade').__express);
app.set('view engine', 'jade');
app.use(express.static(__dirname + '/public'));

var React = require("react");
var ReactDOM = require('react-dom/server');

var dList = require('./public/dynamicList.js');
var List = React.createFactory(dList.List);
app.get('/list', function(req, res){
var data = [
  {some data}
 ];
  res.render('list', {
   react: ReactDOM.renderToString(List({data, adapter}))
  });
});

这是组件文件：

var isNode = typeof module !== 'undefined' && module.exports
,React = isNode ? require('react') : window.React 
,ReactDOM = isNode ? require('react') : window.ReactDOM;

var DynamicList = require('react-dynamic-list/lib/List');

var List = React.createClass({
    handleClick: function(){
      console.log("clicked!");
    },
    componentDidMount:function(){
      console.log("mounted");
    },
    render: function(){
      return (
         <div>
          <DynamicList data={this.props.data} adapter={this.props.adapter} onClickRow={()=>{this.handleClick()}}/>
          <div onClick={this.handleClick}>COMMON!</div>
          </div>
      );
    }
});
if (isNode) {
  exports.List = List;
} else {
  ReactDOM.render(<List/>, document.getElementById('list'));
}

这是模板文件

  doctype
  html
  head
    title Super reactive thing
    body
    div(id='list')!= react

    script(src='https://fb.me/react-0.14.0.js')
    script(src='https://fb.me/react-dom-0.14.0.js')
    script(src='https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js')

    script(src='/bundle.js', type='text/javascript')
    // script(src='/dynamicList.js', type='text/babel')

通常在最后一个文件中，我会在浏览器中使用与在节点中相同的文件'/dynamic List.js'，但是浏览器不支持 require() 所以我使用 browserify 和这个命令：

browserify -t [ babelify --presets [ react ] ] public/mainPage.js -o public/bundle.js

毕竟，点击事件不会发生在行上而不是在 div 上并且 "mounted" 永远不会去控制台，我错了什么？如有任何帮助，我们将不胜感激！

Answer 1

您的客户端代码未正常提供，请检查您的模板链接。此外，您不需要使用工厂。

Answer 2

您包含 React 组件文件的方式（使用 isNode 等）并不意味着与 browserify 结合使用。您实际上是将整个 React 库打包到 bundle.js 中，而 isNode 将无法在 browserify 包中正常工作（即使在浏览器环境中，它的计算结果也是 true，并且 window 对象将不可用，因此它不使用来自 CDN 的 React 库。）

可以通过额外的 if/else 语句来实现这一点，但是您需要此文件中的另一个 React 组件，这使得实现起来很困难。

要继续以这种方式设置项目，您需要（至少）为 React 使用 browserify shim。看看：

基本上，一旦您开始使用 browserify 或 webpack 为浏览器编译 JSX 文件，您将需要一种不同于开始使用的方法来设置项目文件。

React js isomorfic 应用程序不会使用 require() 安装组件

React js isomorfic app doesn't mount a component with require()

javascript

node.js

browserify

reactjs