Question

我有新的反应，所以我在理解我的代码中的错误时遇到了一些麻烦。我正在用节点js express和reactjs编写基本的web应用程序。我使用一个库来做出反应：＆＃39; react-dynamic-list＆＃39;但如果我需要我自己的另一个文件的代码，同样的事情发生。这是我的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')

通常在最后一个我会使用相同的文件＆＃39; / dynamic List.js＆＃39;在浏览器中和节点一样，但是浏览器不支持require（），所以我使用了这个命令的browserify：

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

毕竟，点击事件不会发生在不在div上的行上，并且＆＃34;已安装＆＃34;永远不会去控制台，我错了什么？非常感谢任何帮助！

Answer 1

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

Answer 2

包含React组件文件（包含isNode等）的方式并不意味着与browserify一起使用。您基本上将整个React库打包在bundle.js中，而isNode将无法在browserify包中正常工作（即使在浏览器环境中也会评估为true，并且{window 1}}对象将不可用，因此它不使用CDN中的React库。）

可能有一些方法可以使用额外的if / else语句来完成这项工作，但是你需要在这个文件中使用另一个React组件，这使得这很困难。

要继续以这种方式设置项目，您需要（至少）使用一个用于React的browserify填充程序。看看：How do I exclude the "require('react')" from my Browserified bundle?

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

React js isomorfic应用程序没有使用require（）安装组件

2 个答案: