Question

我一直在使用node-jsx，browserify，reactify等构建一个同构反应应用程序。我的代码在服务器上正常运行，并且组件已正确安装和呈现。但是，react函数似乎不起作用，例如，handleClick函数无法识别alert（），或者console.log（）从不在服务器和客户端控制台上打印出预期的结果。谁能确定这里发生了什么？

更新：我想指出的另一件事是，当我运行服务器并转到浏览器时，在浏览器控制台（使用chrome dev工具）中输入“window.React”，它实际上返回了React对象。但是console.log仍然没有为点击处理函数做任何事情。

视图/ index.ejs

<!doctype html>
<html>
<head>
    <title>Shortened URL Generator</title>
    <link href='/style.css' rel="stylesheet">
    <link href="css/griddle.css" rel="stylesheet" />
</head>
<body>
<h1 id="main-title">Welcome to Shortened URL Generator</h1>

<div id="react-main-mount">
    <%- reactOutput %>
</div>

<!-- comment out main.js to see server side only rendering -->
<script src="https://fb.me/react-with-addons-0.14.3.min.js"></script>
<script src="https://fb.me/react-dom-0.14.3.min.js"></script>
<script src="/main.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//fb.me/JSXTransformer-0.12.0.js"></script>
<script type="text/javascript" src="scripts/griddle.js"></script>

</body>
</html>

路由/ routes.js

    var React = require('react/addons'),
    ReactApp = React.createFactory(require('../components/ReactApp'));

    module.exports = function(app) {
    var storeUrls = {
        "fb.com": "facebook.com"
    };
    app.get('/', function(req, res){
        // React.renderToString takes your component
        // and generates the markup
        var reactHtml = React.renderToString(ReactApp({}));
        // Output html rendered by react
        // console.log(myAppHtml);
        res.render('index.ejs', {reactOutput: reactHtml});
    });
    app.get('/:routeParam', function(req, res){

    });

};

应用/组件/ ReactApp.js

var TableComponent = require('./TableComponent');
var React = require('react/addons');
var urls = require('./url');
var Griddle = React.createFactory(require('griddle-react'));
var ReactApp = React.createClass({

componentDidMount: function () {
    console.log("yes");

},
handleClick: function() {
   // this.setState({liked: !this.state.liked});
    var longUrl = this.refs.inputUrl;
    urls.push({
        "original url": longUrl,
        "shortened url": "/"
    })
    console.log(longurl);

},
render: function () {
    return (
        <div>
        <div id="form">
            <form>
             <section>Paste your long url here</section>
             <input ref="inputUrl"  value={this.props.value} type="text" placeholder="http://...." />
             <button onclick={this.handleClick} type="submit" value="Submit">Shorten URL</button>
            </form>
        </div>
            <div id="table-area">
                <TableComponent />
            </div>
        </div>
    )
}
});

module.exports = ReactApp;

应用/ main.js

var React = require('react/addons');
var ReactApp = require('./components/ReactApp');
var TableComponent = require('./components/TableComponent');

var mountNode = document.getElementById('react-main-mount');
var mountTable= document.getElementById('table-area');

React.render(new ReactApp({}), mountNode);
React.render(new TableComponent({}), mountTable);

server.js



var express = require('express'),
path = require('path'),
app = express(),
port = 5000,
bodyParser = require('body-parser');

require('node-jsx').install();


// Include static assets. Not advised for production
app.use(express.static(path.join(__dirname, 'public')));
// Set view path
app.set('views', path.join(__dirname, 'views'));
// set up ejs for templating. You can use whatever
app.set('view engine', 'ejs');

// Set up Routes for the application
require('./app/routes/routes.js')(app);

//Route not found -- Set 404
app.get('*', function(req, res) {
    res.json({
    'route': 'Sorry this page does not exist!'
});
});

app.listen(port);
console.log('Server is Up and Running at Port : ' + port);




Gulpfile.js

var gulp       = require('gulp');
var source = require('vinyl-source-stream'),
browserify = require('browserify');
gulp.task('scripts', function(){
return browserify({
   transform: [ 'reactify' ],
   entries: 'app/main.js'
})
.bundle()
.pipe(source('main.js'))
.pipe(gulp.dest('./public/'));
});
gulp.task('default', ['scripts']);

Answer 1

可以对现有代码进行简单修改：

if (typeof window !== 'undefined) {
    window.React = require('react');
}

为全局提供任何你想要的东西，通常你也想为ReactDOM做同样的事情，所以你可以直接在html文件中调用render。但通常不建议这样做。您可能希望使用React Downloads的独立下载。

Answer 2

如果您的脚本在html中加载该元素之前运行，

document.getElementById('react-main-mount');将返回null。

您应该做的是在结束标记</body>之前包含您的脚本，或在DOMContentLoaded之后运行ReactDOM.render。

Answer 3

所以我意识到它与main.js文件中的React.render有关。而不是

React.render(new ReactApp({}), mountNode);

应该是

React.render(<ReactApp/>, document.getElementById('react-main-mount'));

在这种情况下，TableComponent不需要渲染，也需要React而不使用插件。

现在有效。感谢大家的帮助！

同构反应 - 如何使反应功能成为窗口对象的一部分

3 个答案: